Vue的生命周期

vue的生命周期

在vue官网中我们可以看到vue的生命周期图示，它描述了一个vue组件从初始化到被销毁的全部过程。

 

本质上，每个主要Vue生命周期事件被分成两个钩子，分别在事件之前和之后调用。Vue应用程序中有4个主要事件(8个主要钩子)。

• 创建 — 在组件创建时执行

• 挂载 — DOM 被挂载时执行

• 更新 — 当响应数据被修改时执行

• 销毁 — 在元素被销毁之前立即运行

下面分别对8个主要钩子函数做一个说明：

beforecreat： 执行时已经创建了一个vue空壳框架（相当与new了一个空对象）

created：执行时已经完成数据及函数的初始化

beforemount：执行时已经完成页面模板的编译，并已经将数据加载成内存中的dom（简单理解为html）， 执行拿取节点是拿不到的，因为dom还未被渲染到页面上

mounted：执行时已经将内存中的dom渲染到页面中 （此时vue实例创建完毕，进入运行阶段），mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

beforeupdate：此时页面data发生了改变，但为渲染到页面中

updated：此时已经将改变后的data渲染到新的dom中并完成了更新，updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：

beforedestory：此时组件进入销毁阶段，但数据仍然可以使用

destory：组件销毁

而在实际应用中，vue为了提高页面的使用效率，在使用组件时是可以使用缓存功能的，在使用keep-alive标签后，被他包含的组件就会被缓存。例如，如果我们使用<keep-alive>组件来管理不同的选项卡视图，每次在选项卡之间切换时，每个动态组件的状态都将被缓存和保存。

 

那么，既然存在了缓存，该组件就不会轻易的被销毁掉，所以，使用了缓存后的组件在实际上被创建了之后就一直会存在，而他的created钩子就只会执行一遍，如果想要每次进入该组件就执行一个方法的话，就需要写另一个钩子函数：activated, 而与之对应的还有一个函数：deactivated ，这两个生命周期钩子函数互斥执行，activated是在组件被激活时调用，而deactivated 是在组件被停用时执行。

比如：我们有两个组件：A组件与b组件，他们均被<keep-alive>缓存，a组件中写了3个方法

created() {
    console.log("组件A被创建");
}，
activated() {
    console.log("组件A被激活");
}，
deactivated () {
    console.log("组件A被停用");
}

b组件中也有3个方法：

created() {
    console.log("组件B被创建");
}，
activated() {
    console.log("组件B被激活");
}，
deactivated () {
    console.log("组件B被停用");
}

当我们使用A组件时，a组件的created和activated方法执行，当切换到b组件时，a组件的deactivated方法执行，b组件的created和activated方法执行，之后，不管切换的是哪个组件，他的created都不会被执行