Vue的生命周期

Vue的生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期

一、创建

组件创建

期间的四个生命周期钩子函数beforeCreate，created，beforeMount，mounted

beforeCreate()

为第一个生命周期函数，表示实例完全被创建出来之前，会执行它，在beforeCreate函数执行的时候，data和methods中的数据都还没有初始化

created()

为第二个生命周期函数，在created中，data和methods中的数据都初始化好了，如果要调用methods中的方法或者data中的数据，最早只能在created中操作
开始编译模板，执行vue代码中的指令，在内存中生成一个编译好的最终模板字符串，然后将他渲染成内存中的dom，此时只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中去

beforeMount()

beforeMount()将要挂载，为第三个生命周期函数，表示模板已经在内存中编译完成，但是尚未渲染到页面中去，在beforeMount执行的时候，页面中的元素还没有被真正替换过来，只是之前写的模板字符串
将内存中编译好的模板真实的替换到页面上

mounted()

挂载，为第四个生命周期函数，表示内存中的模板已经真实的挂载到页面上，用户已经可以看到挂在好的页面了。mounted是实例创建期间的最后一个生命周函数，当执行完mounted，就表示实例已经被完全创建好了，如果没有其他操作的话，这个实例就在内存中不动了

如果要通过某些插件操作页面上的dom节点，最早要在mounted中进行

只要执行完mounted，就表示实例已经初始化完毕了，此时，组件已经脱离了创建阶段，进入到了运行阶段

这些事组件运行阶段的生命周期函数，beforeUpdate，updated，这俩时间会根据data数据的改变，选择性的触发0次到多次

二、运行

beforeUpdate()

当执行beforeUpdate的时候，页面中的数据还是旧的，data里的数据是最新的，页面尚未和最新数据保持同步

这一步执行的是先根据data中最新的数据，在内存中重新渲染出最新的dom树，当最新的dom树都更新完成之后，会把最新的内存dom树，重新渲染到真实的页面中去，这时候就完成了数据从data（model层）到view(视图层)的跟新

updated()

事件执行的时候，页面和data已经保持同步，都是新的

三、销毁

销毁函数

beforeDestroy()

当运行到beforeDestroy钩子函数的时候，vue实例已经从运行阶段进入到了销毁阶段。实例身上所有的data和methods以及过滤器指令都处于可用状态，此时还没有真正执行销毁的过程。

destroyed()

当执行到 destroyed指令的时候，组件已经被完全销毁了，此时函数中所有的数据，指令，方法，过滤器都已经不可用了