Vue生命周期总共分为8个阶段：
创建前后、挂载前后、更新前后、销毁前后
①Vue生命周期第一个阶段：数据挂载阶段
创建前：获取不到数据，也拿不到DOM元素；
创建后：可以获取数据，但拿不到DOM元素。
②Vue生命周期第二个阶段：模板渲染阶段
加载前：可以拿到DOM元素，但是DOM元素没有被解析；
加载后：可以拿到DOM元素，DOM元素被解析了。
③Vue生命周期第三个阶段：组件更新阶段
更新前：数据改变了，DOM没有发生变化；
更新后：数据改变了，DOM也发生了变化。
④Vue生命周期第四个阶段：组件销毁阶段
销毁前：所有的事件监听和实例都可以用；
销毁后：所有的事件监听和实例都被销毁。
附上代码观察各个阶段的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<button @click='update'>更新</button>
<button @click='destroy'>销毁</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
Vue实例的生命周期
*/
var vm = new Vue({
el: '#app',
data: {
msg: '生命周期'
},
methods: {
update: function(){
this.msg = 'hello';
},
destroy: function(){
this.$destroy();
}
},
beforeCreate: function(){
//vue实例刚被创建出来,此时还没有初始化好data和methods属性
console.log('beforeCreate');
},
created: function(){
//实例的data与methods已经初始化,此时还没有开始编译模板
console.log('created');
},
beforeMount: function(){
//已经完成了模板的编译,但是还没有挂载到页面中(准备用编译好的模板替换el属性指向的DOM对象中的内容)
console.log('beforeMount');
},
mounted: function(){
//已经将模板编译好,挂载到了指定的容器后触发的函数,并且实时监听data变化随时准备更新DOM
console.log('mounted');
},
beforeUpdate: function(){
//主要data中的数据发生了变化就会执行这个函数
//执行beforeUpdate时候,data的数据已经是最新的了,但是是还没有更新到界面上的数据
console.log('beforeUpdate');
},
updated: function(){
//主要data中的数据发生了变化就会执行这个函数
//执行updated的时候,data的数据已经是最新的了,界面上的数据也已经更新
console.log('updated');
},
beforeDestroy: function(){
//执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
//最后能使用Vue实例的地址
console.log('beforeDestroy');
},
destroyed: function(){
//执行destyoyed的时候,表示Vue实例已经完全销毁,实例中的任何内容都不能再使用了
console.log('destroyed');
}
});
</script>
</body>
</html>
9799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
