vue第一个生命周期beforecreate
创建前
- 拿不到任何数据
- 也不能访问dom
vue的第二个生命周期created
创建完成
- 可以拿到数据
- 编译中
- dom未挂载，无法获得真实的页面
vue的第三个生命周期 beforemount
挂载前
- 可以获取数据
- 编译完成
- dom未挂载
vue的第四个生命周期mounted
挂载完成（创建完成了）
- 能拿到数据
- 编译完成
- 挂载到dom上
- 完成一个真实的页面渲染
vue的第五个生命周期beforeupdate
修改数据前（组件运行的一个周期）
- data打印出来更新的数据
- dom还是旧的
vue的第六个生命周期updated
修改完成
- 打印出来新的data
- 打印出来新dom挂到真正的页面中
- 完成model到view的更新
vue的第七个生命周期beforedestory
销毁前
- 所有data method都可以用
vue的第八个生命周期destoryed
销毁完成
- 所有data，method等不可再用。
<!DOCTYPE html>
<!--
@title：vue的生命周期
-->
<html>
<head>
<meta charset="utf-8">
<title>vue的生命周期</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 id="message" style="margin-left: 15px;">{{msg}}</h1>
<button class="btn btn-primary" type="button" @click="updateMsg">更新msg</button>
<button class="btn btn-danger" type="button" @click="destroyVM">销毁实例</button>
</div>
<script type="text/javascript">
var vm = new Vue({ //开始创建一个实例对象
el:"#app", //Vue实例的挂载目标
data:{ //vm对象的属性
msg:"我爱中国"
},
methods:{ //vm对象的方法
print(){
return "print方法";
},
updateMsg(){
this.msg = "I love China";
},
destroyVM(){
this.$destroy();
}
},
/* 以下开始为整个vm实例的生命周期 */
beforeCreate(){
console.warn("---------beforeCreate-------------------这是第一个生命周期函数，实例还没有被完全创建出来，data和methods都不存在，所以打印data是undefined，调用print方法提示找不到，因为此时实例都还有被创建，模板还未编译，所以el也是undefined，因为调用print方法报错导致js语句停止执行，所以38行的获取dom的语句不会执行，所以控制台看不到38行的打印内容");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("获取dom:" + document.getElementById('message').innerHTML);
},
created(){
console.warn("---------created------------------这是第二个生命周期函数，实例被创建出来，这个时候data和methods都已经被初始化好了，所以data可以被正常地打印出来，print方法可以被正常的调用，这个时候Vue开始在内存中编译模板，处于编译中（ing）并未编译好的一个状态，所以此时el也是undefined，所以获取dom打印出来的只是{{msg}}");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("获取dom:" + document.getElementById('message').innerHTML);
},
beforeMount(){
console.warn("---------beforeMount------------------这是第三个生命周期函数，data和methods正常打印就不多说了，在上面的created生命周期中我们不是说模板处于正在编译的一个状态吗，那么此时模板已经在内存中编译完成了，所以打印el会输出[Object HTMLDivElemet]这样一个元素，但是此时模板只是在内存中编译完成还没有挂载到页面中，所以获取dom打印出来的还是{{msg}}");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("获取dom:" + document.getElementById('message').innerHTML);
},
mounted(){
console.warn("---------mounted------------------这是第四个生命周期函数，此时内存中的已经编译好的模板已经真实的挂载到了页面中，一个渲染好的页面呈现在了我们眼前,此时的打印结果想必大家已经知道原因了。");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("获取dom:" + document.getElementById('message').innerHTML);
console.group("说明：mounted是实例创建过程中的最后一个生命周期函数，当mounted执行完毕就表示实例已经被完全创建好了，如果没有其它操作，这个实例会一直保存在内存中，此时创建阶段正式结束，进入运行阶段，")
console.groupEnd();
},
beforeUpdate(){
console.warn("---------beforeUpdate------------------这是第五个生命周期函数，也是组件运行阶段的第一个生命周期函数，点击更新按钮时会触发该方法，这一步先根据data中最新的数据，在内存中重新编译好一个最新的模板，这个最新的模板在该生命周期中会被编译好，但不会挂载到真实的页面中，所以data中打印出来的是更新后的最新的数据，而获取dom打印出来的还是旧的数据");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("获取dom:" + document.getElementById('message').innerHTML);
},
updated(){
console.warn("---------updated------------------这是第六个生命周期函数，也是组件运行阶段的第二个生命周期函数，此时内存中已经编译好的最新的模板会挂载到真正的页面中，这个时候就完成了data(model)层到view(视图)层的更新，页面同步刷新，所以获取dom的时候会打印出最新的数据“I love China”");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("获取dom:" + document.getElementById('message').innerHTML);
},
beforeDestroy(){
console.warn("---------beforeDestroy------------------这是第七个生命周期函数，当执行该钩子函数的时候，Vue实例从---运行阶段---进入到了---销毁阶段---但是此时实例上的data、methods以及过滤器和指令等都处于可用状态，该实例还未真正销毁。");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("获取dom:" + document.getElementById('message').innerHTML);
},
destroyed(){
console.warn("---------destroyed------------------这是第七个生命周期函数，当执行该钩子函数的时候，实例完全销毁，魂飞魄散，自然而然地，实例上的所有数据，方法，指令等等都不再可用。");
console.log("el:" + this.$el);
console.log("data:" + this.msg);
console.log("methods:" + this.print());
console.log("获取dom:" + document.getElementById('message').innerHTML);
}
})
</script>
</body>
</html>
转至：https://www.csdn.net/gather_21/MtTaAgysNjEwOS1ibG9n.html