vue生命周期的几个阶段

Vue的生命周期可以分为四个阶段和11个钩子函数：

四个阶段：

初始化阶段：此时Vue实例刚刚被创建，实例上还没有数据，也没有计算属性，但是可以访问到$el和$options，此时还不能访问data和methods。

实例挂载阶段：在这个阶段，Vue实例已经创建，但还不能获取DOM元素。然后模板已经在内存中编译好了，但是尚未挂载到页面中去。当模板挂载到页面上后，数据和DOM都已被渲染出来，此时页面和内存中都是最新的数据。

数据更新阶段：当data中的数据改变时，会触发更新前的钩子（beforeUpdate），此时页面中显示的数据还是旧的，但data中的数据已经更新。然后Vue会重新渲染虚拟DOM，并与旧的虚拟DOM进行比较，找出差异并应用到实际的DOM上，这个过程是异步的。更新完成后，会触发更新后的钩子（updated），此时页面显示的数据和最新的data数据同步。

销毁阶段：当Vue实例不再需要时，会触发销毁前的钩子（beforeDestroy），此时实例身上所有的data、methods以及过滤器等都处于可用状态，但并没有真正执行销毁。然后Vue会销毁实例与DOM之间的关联，以及解绑数据监听等，完成销毁后，会触发销毁后的钩子（destroyed），此时组件以及被完全销毁，实例中的所有的数据、方法、属性、过滤器等都已经不可用了。

 

11个钩子函数：

 

beforeCreate：实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

created：在这个阶段，vue实例已经创建，但还不能获取DOM元素。

beforeMount：此时实例已经挂载到DOM上，但是DOM还没有更新，$el属性已经存在，但是它还不可见。

mounted：在这个阶段，数据和DOM都已被渲染出来，一般的异步请求都写在这里。

beforeUpdate：此时页面中显示的数据还是旧的，但是data中的数据是最新的，且页面并未和最新的数据同步。

updated：此时页面显示数据和最新的data数据同步。

beforeDestroy：当执行该生命周期函数的时候，实例身上所有的data、所有的methods以及过滤器等都处于可用状态，并没有真正执行销毁。

destroyed：此时组件以及被完全销毁，实例中的所有的数据、方法、属性、过滤器等都已经不可用了。

此外，还有activated和deactivated两个钩子函数，它们是在keep-alive组件激活和停用时调用的。

以上就是Vue生命周期的四个阶段和11个钩子函数