vue的生命周期
Posted kinblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的生命周期相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue的生命周期</title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="修改msg" @click="msg = ‘no‘"> <h3 id="h3">{{ msg }}</h3> </div> <script> var vm = new Vue({ el: ‘#app‘, data: { msg: "ok" }, methods: { show() { console.log(‘执行了show方法‘) } }, /*创建的四个事件*/ /*实例创建前-在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化*/ beforeCreate() { // console.log(this.msg); // this.show() }, /*实例创建后-在created生命周期执行的时候，data和methods中的数据被初始化*/ created() { // console.log(this.msg); // this.show() }, /*模板挂载前-在beforeMount生命周期执行的时候，表示模板在内存中编译完成,但还未渲染到页面中*/ beforeMount() { // console.log(document.getElementById(‘h3‘).innerText); }, /*模板挂载后-在mounted生命周期执行的时候，将模板渲染到页面中,如果需要操作DOM节点，最早可以在这里进行*/ mounted() { // console.log(document.getElementById(‘h3‘).innerText); }, /*运行的两个事件*/ /*数据更新前-在beforeUpdate生命周期执行的时候,将数据更新,但页面还没有被更新*/ beforeUpdate() { // console.log(‘页面数据:‘ + document.getElementById(‘h3‘).innerText); // console.log(‘data数据:‘ + this.msg); }, /*数据更新后-在updated生命周期执行的时候,将数据更新到页面中*/ updated() { // console.log(‘页面数据:‘ + document.getElementById(‘h3‘).innerText); // console.log(‘data数据:‘ + this.msg); }, /*销毁的两个事件*/ /*销毁实例前-在beforeDestroy生命周期执行的时候, 实例进入销毁阶段,但功能还可以使用*/ beforeDestroy() { }, /*销毁实例后-在destroyed生命周期执行的时候,实例被销毁,功能不能使用*/ destroyed() { } }); </script> </body> </html>
以上是关于vue的生命周期的主要内容，如果未能解决你的问题，请参考以下文章
在不存在的片段上调用片段生命周期和 onCreate 的问题