生命周期

Vue中的生命周期分为：4个阶段（创建阶段、挂载阶段、更新阶段、销毁阶段）、8个生命状态和11个钩子函数。其中4个阶段对应8个生命状态和8个钩子函数，另后增3个钩子函数。

1、初始化--create

初始化阶段是Vue对象被创建的阶段，对应两个生命状态：beforeCreate（创建前）、created（创建后）和两个钩子函数beforeCreate( )、created( )。

1.1、创建前状态

• 初始化内置事件和声明周期函数；
• 调用beforeCreate( )钩子函数；（但此时对象中的 data 和 methods 尚未被添加，因此并不能被访问到）
• 添加对象中的 data 和 methods数据；
• 调用created( )钩子函数；（此时可以访问到 data 和 methods 数据，但是并不能获取DOM上的元素）

1.2、创建后状态

• 检查是否有el配置项
• 检查是否有template选项

注意：此时的DOM为虚拟DOM，而非真实DOM

2、挂载--mount

挂载阶段是Vue虚拟DOM被挂载为真实DOM的阶段，对应两个生命状态：beforeMount（挂载前）、mounted（挂载后）和两个钩子函数beforeMount( )、mounted( )。

2.1、挂载前状态

• 调用beforeMount（）钩子函数；（此时的虚拟DOM尚未被挂载到实体DOM上）
• 将虚拟DOM挂载到el指定的标签上，成为实体DOM；

2.2、挂载后状态

• 调用mounted（）钩子函数；（此时的虚拟DOM已经转化为实体DOM）

3、更新--update

更新阶段是数据发生变化，虚拟DOM重新替换真实DOM的阶段，对应两个生命状态：beforUpdate（更新前）、updated（更新后）和两个钩子函数beforUpdate( )、updated( )。

3.1、更新前状态

• 调用beforUpdate( )钩子函数；（此时虚拟DOM上的数据已经更新，实体DOM上的数据并未更新）
• 将实体ODM与虚拟DOM进行比较，并更新实体DOM上的数据；
• 调用updated( )钩子函数；（此时实体DOM上的数据已经更新完毕）

3.1、更新后状态

• 页面会重新监听新的数据变化

4、销毁--destroy

销毁阶段是Vue对象被销毁的阶段，对应两个生命状态：beforDestroy（挂载前）、destroyed（挂载后）和两个钩子函数beforDestroy( )、destroyed( )。

4.1、销毁前状态

• 调用销毁函数
• 调用beforDestroy（）钩子函数；（此时对象上的方法和属性尚未被销毁）
• 销毁对象上的方法与属性；

4.2、销毁后状态

• 调用destroyed（）钩子函数；（此时的对象上已经没有数据和方法）

5、后增的3个钩子函数

• activated：当keep-alive 缓存组件才会有，组件被激活时调用
• deactivated：当keep-alive 缓存组件才会有，组件被失活时调用
• errorCaptured：当子孙组件出错时，会调用这个钩子函数