Vue生命周期

在了解Vue生命周期时候了，我们肯定会接触到官方给的Vue生命周期图。

如图所示：

Vue生命周期分为四个阶段：
第一阶段创建Vue对象；
第二阶段是DOM挂载；
第三阶段是数据跟新；
第四阶段是销毁实例对象；

每个阶段都是有两个钩子函数，阶段中的钩子函数都是与之对应的。

在第一阶段：我们会遇到第一个函数beforeCreat()，此时的’data’和’methods’都没有初始化，最早初始化是在函数Creat()时候。

第二阶段：经过了第一阶段后，我们要对el进行判断是否存在，如果不存在就要初始化el，否则进入下一步。然后对el是否挂载HTML节点进行判断，如果未挂载，就进行挂载节点，否则进入下一步。在这个阶段中，我们将遇到第三个钩子函数beforeMount()，此时内存中的数据已经编译完毕，但是HTML页面上并没挂载。当进行到第四个钩子函数Mount()时，此时页面才渲染成功。

第三阶段：在第五个钩子函数beforeUpdated()，例如当’data’被修改时候，此时内存中的数据已经更新了，但是HTML上的数据并没有更新渲染。当进行到下一个钩子函数Updated()，此时页面才和内存同步。

第四阶段：进行到第七个钩子函数beforDestroy()时候了，此时’data’和’methods’等等函数与数据并没有被销毁，还是可以调用的。当进行到最后一个钩子函数destroy()，此时Vue实例化对象被销毁。