Vue生命周期

下图是官方发布的生命周期函数图，接下来将从三个步骤对生命周期函数进行讲解。

一、挂载流程 

（一）beforeCreat() 生命周期函数

当我们new Vue() 过后，Vue就会自动帮我们进行初始化操作。

但是这个时候的初始化只对Vue中的声明周期函数、事件等进行初始化，并未进行数据代理。

也就是我们在beforeCreate() 生命周期函数中无法通过vm访问到data中的数据和methods中的方法。

（二）created() 生命周期函数

beforeCreated生命周期函数调用完以后就接着进行初始化。

下一步就是对数据监视和数据代理进行初始化。

也就是我们在created() 生命周期函数中可以通过vm访问到data中的数据和methods中配置的方法。

（三）beforeMount() 生命周期函数

在Vue对于数据的初始化完成过后就开始解析模板，在内存中生成虚拟DOM。

此时的页面还不能显示解析好的内容，呈现的是未经Vue编译的DOM结构。

所有对于DOM的操作，最终都不奏效。

（四）mounted() 生命周期函数

虚拟DOM生成后，将虚拟DOM转化为真实DOM插入页面。

此时的页面中呈现的是经过Vue编译后的DOM。

并且对于DOM的操作均有效，但是要尽可能避免在这个时候操作DOM。

至此初始化过程结束，一般在此时开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。

二、更新流程

当data中的数据改变，就会进行更新流程。

（一）beforeUpdate() 生命周期函数

此时数据是新的，但是页面还是旧的。

也就是说：页面和数据还未保持同步。

（二）updated() 生命周期函数

Vue根据新的数据生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面的更新。

也就是完成了Model -> View的更新。

此时的数据和页面都是新的，也就是数据和页面保持同步。

三、销毁流程

只有Vue实例对象才会进入销毁流程。

销毁vm的方法如下：

vm.$destroy();

（一）beforeDestroy() 生命周期函数

在这个生命周期中，vm中所有的data，methods，指令等都处于可用状态（数据会改变，但是不会再进行页面渲染），马上就要执行销毁流程。

一般在此阶段关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。

（二）destroy() 生命周期函数

在这一阶段Vue实例对象已经被销毁了，但是数据还残留在页面上，一般不会使用该生命函数进行操作。

所有的生命周期函数中的this都是指向Vue实例对象！