Vue2 生命周期
文章目录
Vue2 生命周期
- beforeCreate：创建之前（
el、data和message都还是undefined,不可用的） - created：创建完毕（能读取到数据
data的值,但是DOM还没生成） - beforeMount：挂载之前（生成
DOM,但此时{{ message }}还没有挂载data中的数据） - mounted：挂载完毕（
{{ message }}已经成功挂载渲染data的值） - beforeUpdate：更新之前
- updated：更新完毕
- beforeDestroy：销毁之前
- destroyed：销毁完毕（实例与视图的关系解绑，再修改
message的值，视图再也不会更新了） - activated：
keep-alive组件激活时调用 - deactivated：
keep-alive组件停用时调用
注：
activated和deactivated是比较特殊的两个钩子，需要keep-live配合使用- 当引入
keep-alive的时候，页面第一次进入，钩子的触发顺序created=>mounted=>activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
举例代码：
<body>
<div id="app">
{{ message }}
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: 'xia',
},
beforeCreate() {
console.group("1. beforeCreate() =====> 创建之前");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
console.log("%c%s", "color:red", "el、data和message都还是undefined,不可用的");
console.log("-------------------------------------------");
},
created() {
console.group("2. created() =====> 创建完毕");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
console.log("%c%s", "color:red", "能读取到数据data的值,但是DOM还没生成");
console.log("-------------------------------------------");
},
beforeMount() {
console.group("3. beforeMount() =====> 挂载之前");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
console.log("%c%s", "color:red", "生成DOM,但此时{{ message }}还没有挂载data中的数据");
console.log("-------------------------------------------");
},
mounted() {
console.group("4. mounted() =====> 挂载完毕");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
console.log("%c%s", "color:red", "{{ message }}已经成功挂载渲染data.name的值：Xia");
console.log("-------------------------------------------");
},
beforeUpdate() {
console.group("5. beforeUpdate() =====> 更新之前");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
console.log("-------------------------------------------");
},
updated() {
console.group("6. beforeUpdate() =====> 更新完毕");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
console.log("-------------------------------------------");
},
beforeDestroy() {
console.group("7. beforeDestroy() =====> 销毁之前");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
console.log("-------------------------------------------");
},
destroyed() {
console.group("8. beforeDestroy() =====> 销毁完毕");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message);
console.log("%c%s", "color:red", "实例与视图的关系解绑，再修改message的值，视图再也不会更新了");
console.log("-------------------------------------------");
}
});
</script>
</body>
create 和 mounted
beforecreated：Vue 实例的挂载元素$el 和 数据对象data 并未初始化
created:完成了 data 数据的初始化，$el没有
beforeMount：完成了 $el 和 data 初始化，但还是挂载在虚拟的 DOM 节点上
mounted：Vue 实例挂载到实际的 DOM 上
.
另外在标红处，我们能发现 $el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了,到后面mounted挂载的时候再把值渲染进去。
update
这里我们在 chrome console里执行以下命令
app.message = 'bing'
下面就能看到data里的值被修改后，将会触发update的操作。
destroy
这里我们在console里执行下命令对 vue实例进行销毁
app.$destroy();
销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，执行了destroy操作，后续就不再受vue控制了。
activated
比较特殊的一个钩子，需要
keep-live配合使用
activated:动态组件初始化渲染过程中调用 keep-alive组件激活时调用。
deactivated:动态组件移出过程中调用 keep-alive组件停用时调用。
当引入 keep-alive 的时候，页面第一次进入，钩子的触发顺序 created => mounted => activated，退出时触发 deactivated。当再次进入（前进或者后退）时，只触发activated。
keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。
Vue2 生命周期总结
beforecreate: 举个栗子：可以在这加个loading事件
created：在这结束loading，常做一些数据请求和耗时操作，实现函数自执行(常用)
mounted： 依赖dom做一些其他的操作，也可以发起后端请求，配合路由钩子做一些事情(常用)
beforeDestroy： 你确认删除XX吗？
destroyed：当前组件已被删除，清空相关内容
示意图：
Vue2 父子组件生命周期执行顺序
1. 加载渲染过程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
2. 更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated->父updated
3. 销毁过程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
