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