Vue中的生命周期

什么是vue生命周期

Vue生命周期:每一个vue实例从创建到销毁的过程就是这个vue实例的生命周期。在这个过程中，vue实例经历了从创建到挂载到更新再到销毁等一系列过程。

在了解生命周期之前，我们先来看一张vue生命周期图：

beforeCreate（创建前）

vue被创建后进入的第一个生命周期钩子函数。此时数据代理等还没有开始， vue实例身上还没有data中的数据，methods方法等，此时还无法访问data中的数据、methods中的方法。

created（创建后）

在进入created中。已经完成数据监测和数据代理等操作。在这里可以访问data中的数据和methods中的方法。如果想要对数据进行处理和访问，最早要在created中。

从created到beforeMount之间

在结束created后和进入beforeMount之前，在这个阶段Vue开始解析模板，在内存中生成虚拟DOM，页面还不能显示解析好的内容【还没有生成真实的DOM)。

beforeMount（挂载前）

在beforeMount中，此时页面呈现的是未经Vue解析的DOM结构。在这个阶段，所有对DOM的操作，最终都不奏效了（因为在此之前，内存中已经存在生成好的虚拟DOM，vue在后面会通过虚拟DOM生成真实DOM然后渲染到页面中，所以即使你在beforeMount中对DOM进行操作，也会在一瞬间被替换掉。）

从beforeMount到mounted之间

在执行完beforeMount生命周期钓子函数后到进入mounted之前， vue进行了将内存中的虚拟DOM转为真实DOM插入页面中的操作。

mounted（挂载后）

在mounted中，此时页面中呈现的是经过vue编译后的DOM，页面已经被挂载完毕，如果要想对DOM做一些操作，最早要在这mounted中，不过请尽可能避免对DOM进行操作（vue的目的就是让程序员不用关心DOM操作），一般在这里开启定时器、发送异步请求等。

beforeUpdate(更新前)

当数据发生改变时，就会开始执行beforeUpdate，在这个阶段，数据已经变成新的，但是页面还是旧的。

从beforeUpdate到updated之间

在还没有进入updarted之前，vue会根据新数据，生成新的虚拟 DOM，随后与旧的虚拟DOM进行比较，最终完成页面的更新。

updated（更新后）

在执行到updated后，此时数据已经是最新的，页面也已经是最新的，即:页面和数据保持同步。

beforeDestroy（销毁前）

当vue实例开始被销毁时，就要开始执行beforeDestroy，在此阶段，data中的数据，methods中的方法，指令等等都还处于可用的状态，马上要执行销毁过程，一般在此阶段关闭定时器，解绑自定义事件等。

destroyed（销毁后）

在此阶段，vue实例已经彻底被销毁。vue实例身上的所有东西都无法被访问和操作。

在图中标记信息如下：