Vue 生命周期简介
vue生命周期图解.jpg
生命周期的钩子 LifeCycle hooks
每个 Vue 实例在被创建的时候都要经过一系列的初始化过程——例如，需要重新设置数据监听、编译模板、讲师类挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。
| Vue 2.0 | Description |
|---|---|
| beforeCreate | 组件实例刚被创建，组件属性计算之前，如 data 等属性 |
| created | 组件实例创建完成，属性已绑定，但DOM 还未生成，$el 属性还不存在 |
| beforeMount | 模板编译挂载之前 |
| mounted | 模板编译挂载之后 |
| beforeUpdate | 组件更新之前 |
| update | 组件更新之后 |
| activated | for keep-alive ，组件被激活时调用 |
| deactivate | for keep-alive ， 组件被移除时调用 |
| beforeDestory | 组件销毁前调用 |
| destoryed | 组件销毁后都调用 |
生命周期钩子函数的执行顺序和执行时间：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello gaoxin!!"
},
beforeCreate: function () {
console.group("beforeCreate 创建实例之前===========");
console.log("el: " + this.$el); // undefined
console.log("data: " + this.$data); // undefined
console.log("message: " + this.message);
},
created: function () {
console.group("Created: 创建实例完成===========");
console.log("el: " + this.$el); // undefined
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
beforeMount: function () {
console.group("beforeMount 挂载前状态==========");
console.log("el: " + this.$el); // 已被初始化
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
mounted: function () {
console.group("Mounted 挂载结束状态=============");
console.log("el: " + this.$el); // 已被初始化
console.log("data: " + this.$data); // 已被初始化
console.log("message: " + this.message); // 已被初始化
},
beforeUpdate: function () {
console.group("beforeUpdate 更新前状态=========");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
updated: function () {
console.group("Updated 更新完成状态");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
beforeDestroy: function () {
console.group("beforeDestroy 实例销毁之前");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
},
destroyed: function () {
console.group("Destoryed 实例销毁之后");
console.log("el: " + this.$el);
console.log("data: " + this.$data);
console.log("message: " + this.message);
}
})
</script>
</body>
</html>
create 和 mounted 相关
执行上面代码，可以看到：
beforecreated ：el 和 data 并未初始化
created：完成了data数据的初始化 el 没有
beforeMount：完成了el 和 data的初始化
mounted：完成了挂载
也就是说挂载前的状态是虚拟DOM技术，先把坑站住了挂载之后才真正的把值渲染进去
update 相关
我们在浏览器console里执行命令：
app.message = "hello~"
我们就出发了update相关的钩子函数也就是说data里的值被修改会出发update的操作
destory 相关
我们在浏览器console里执行命令：
app.$destroy();
触发了destroy相关的钩子函数，也就是说组件被销毁~
更改message的值DOM中的值不变也就是说DOM元素依然存在只是不受vue控制了
网友评论