vue2x生命周期详解

---

前言

本文章主要是为了面试而准备的，为了更好地理解vue2x的生命周期。

---

一、官方说明

遇事不决看官方文档，这绝对不会出错，我们想要详细的了解vue2x的生命周期，那么我们首选就是要看官方文档。
首先我们就可以看到，生命周期的目录在vue实例之下，这就说明了。vue生命周期和vue实例密不可分。
文章的第一段描述就告诉了我们，vue实例在创建的过程中会经历一系列的初始化，在这个过程中会运行生命周期函数。而开发人员创造出生命周期函数的目的也非常明确，就是为了用户在不同阶段添加代码。

根据官方的生命周期图示，生命周期主要分为8个，4个部分。创建前后，挂载前后，更新前后，销毁前后。
这里我想要明确的说明，生命周期就是一个流程，生命周期钩子函数就是当生命周期走到那个时间时的一个回调函数。

二、详细解读官方示意图

---

根据官方示意图的步骤，(图示上标注钩子函数的横线就是代表这个生命钩子函数可以在这个位置插入代码)

1，构造函数new Vue()创建了一个vue实例。

2，init event，lifecycle，初始化事件以及生命周期函数（这里的事件我没有找到详细的解读，不过我认为是自定义的事件，其中也包括生命周期钩子函数以及createElement函数，这个过程中调用了三个初始化函数

initLifecycle(),initEvents(),initRender(),createElement函数是在initRender是调用的。)

3，init jections&reactivity，依赖注入，这个时候data中的数据完成了映射，但是dom还没有生成。

4，下面是进行判断条件，可以看到el参数是必须拥有的，接下来判断是否拥有template选项，如果拥有这个选项，则将模板转换为render函数，没有就使用outerHTML。

对于这一段我的理解是，vue写出来的页面，在查看元素时查看到的时html，而这个过程就是转换的过程，但是不是完全的步骤，这个时候data还没有挂载上。如何直接是outerHTML就是另一种转换方式。
（在这个过程结束后的beforeMounted钩子函数中，dom还未创建）

5，接下来的过程就是根据将虚拟的dom转换为真实的dom，成为最后的页面。

6，在data数据改变后，会触发数据绑定的组件局部改变。

7，最后的销毁部分，先卸载各种监听、各种事件，然后watcher、子组件child components、事件event等等。

---

三、注意

1，在beforeUpdate中进行数据改变，不会再次触发update，如果在updated中进行数据改变会再次调用update。
2，在mounted中赋予数据（获取数据），可能会导致页面闪动，在mounted前不会。
3，在使用页面状态保持时，activated可以在当前页面回来时，触发。在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等

其他钩子函数：
activated：keep-alive缓存的组件激活时，
deactivated：keep-alive缓存的组件停用时调用，
errorGaptured：捕获一个来自子(孙)组件错误时调用，