Vue2 生命周期
Vue 生命周期
概述
在使用 Vue 时，我们需要执行一些 JS 代码。比如我们需要在页面中添加一个定时器来固定间隔更新时间。这时我们可能会想到直接在，Vue 实例外书写 JS 代码。这种方法能完成操作，但是 Vue 并不建议这样写。Vue 建议尽量在 Vue 实例中完成所有的操作。这时我们就需要理解 Vue 的生命周期并使用 Vue 为我们提供的生命周期函数来完成。
Vue 生命周期指的就是从 Vue 实例创建，到 Vue 实例销毁这一整套流成。我们可以将其理解成 Vue 的一生。
对应 Vue 生命周期的不同阶段，Vue 为我们提供了一些函数，可供我们在对应的生命周期阶段调用我们需要的代码，这些函数我们惩治为 Vue 生命周期函数，我们也可以将其称为钩子（hook）。
Vue 生命周期函数会随着 Vue 运行到不同阶段被 Vue 自动执行。
Vue 生命周期
下面的图片完成的介绍了 Vue 的一生。其中红色框的为 Vue 生命周期函数。蓝色框为解释说明。其余为 Vue 的一生。
Vue 生命周期函数
<body>
<div id="app">
<button @click="number++">update data +1</button><br>
<p>data: {{number}}</p>
<button @click="destroy">destroy</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/gh/brokyz/brokyzCDN/vue/2.7.10/vue.js"></script>
<script>
Vue.config.productionTip = false
const vm = new Vue({
data: {
number: 0
},
methods: {
destroy() {
this.$destroy()
}
},
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("created");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
beforeDestroy() {
console.log("beforeDestroy");
},
destroyed() {
console.log("destroyed");
}
}).$mount("#app")
</script>
钩子解读：
beforeCreate：这里指的数据检测、数据代理创建之前。所以这里并不能访问到 vm 实例中的 data 数据和methods方法。注意，这并不是 Vue 实例 vm 创建之前，如果 Vue 实例都还没有创建，又哪里会有 Vue 生命周期函数呢？created：此时已经创建了数据检测和数据代理。这时可以访问到 vm 实例的数据、methods 方法。beforeMount：此时虚拟 DOM 已经解析生成并存于内存中，但是还没有转换成页面中的真实 DOM 并插入页面，所以现在页面上展现的 DOM 还都是未经 Vue 编译的 DOM 结构。因此这里对 DOM 的操作最终都不会生效。因为不管怎么操作，都会一瞬间改变，之后 Vue 将虚拟 DOM 转换为真实 DOM 时插入页面后，之前的 DOM 操作会被覆盖掉。所以只是一瞬间生效，最终还会被覆盖掉失效。mounted（常用）：此时内存中的虚拟 DOM 已经转换为真实 DOM 并插入页面。所以这时页面中呈现的时经过 Vue 编译的 DOM 结构。所以这时对 DOM 的操作都有效（尽量避免）。一般都会在此处设置定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。beforeUpdate：此时数据已经发生变化，但是页面还没有进行更新。也就是这里的数据已经是新的了，但是页面还是旧页面。注意，如果只涉及数据变化，不涉及页面更新则不会触发页面更新流程。updated：此时页面已经完成更新。也就是说这时候数据是新数据，页面也是新页面。注意，如果只涉及数据变化，不涉及页面更新则不会触发页面更新流程。beforeDestroy（常用）：此时 vm 中的 data、methods、指令等都处于可用状态，马上执行销毁过程。此时不会数据进行操作，因为即便操作了也不会更新页面了。一般在此阶段关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。destroyed：此时 vm 实例已经完全销毁，无法在借助 vm 实例对页面进行管理。
还有三个钩子在这里并没有展现
nextTick(()=>{})，这个钩子在 vm 和 vc 身上，有时我们对组件进行操作时，真实dom还没有生成被渲染到页面上，但是我们又需要操作这个dom。这样我们就无法获取我们要操作的元素。这时我们可以写在 nextTick 身上。其中的代码会在页面渲染之后执行。activated(){}，这个钩子在路由中存在，如果一页面进行缓存而非销毁时。那么再次进入这个页面就会触发 activated。deactivated(){}，这个钩子在路由中存在，如果一页面进行缓存而非销毁时。那么离开这个页面就会触发 deactivated。
