Vue生命周期
对vue生命周期的理解？
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
- 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el为undefined，还未初始化。
beforeCreate被调用完成
beforeCreate 之后
-
初始化
inject -
初始化
state- 初始化
props - 初始化
methods - 初始化
data - 初始化
computed - 初始化
watch
- 初始化
-
初始化
provide
所以在 data 中可以使用 props 上的值，反过来则不行。
created被调用完成
调用 $mount 方法，开始挂载组件到 dom 上。
如果使用了 runtime-with-compile 版本，则会把你传入的 template 选项，或者 html 文本，通过一系列的编译生成 render 函数。
编译这个 template，生成 ast 抽象语法树。优化这个 ast，标记静态节点。（渲染过程中不会变的那些节点，优化性能）。
根据 ast，生成 render 函数。
- 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
beforeMount被调用完成
调用我们上一步拿到的 render 函数生成一个 vnode，vm._update 方法则会对这个 vnode 进行 patch 操作，帮我们把 vnode 通过 createElm函数创建新节点并且渲染到 dom节点 中。
注意，在 render 的过程中，如果遇到了 子组件，则会调用 createComponent 函数。
mounted被调用完成
到此为止，组件的挂载就完成了，初始化的生命周期结束。
- 更新前/后：当
data变化时，会触发beforeUpdate和updated方法
beforeUpdate被调用完成
然后经历了一系列的 patch、diff 流程后，组件重新渲染完毕，调用 updated 钩子。
注意，这里是对 watcher 倒序 updated 调用的。
也就是说，假如同一个属性通过 props 分别流向 父 -> 子 -> 孙 这个路径，那么收集到依赖的先后也是这个顺序，但是触发 updated 钩子确是 孙 -> 子 -> 父 这个顺序去触发的。
updated被调用完成
至此，渲染更新流程完毕。
- 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在
beforeDestroy被调用完成
之后就会经历一系列的清理逻辑，清除父子关系、watcher 关闭等逻辑。但是注意，$destroy 并不会把组件从视图上移除，如果想要手动销毁一个组件，则需要我们自己去完成这个逻辑。
然后，调用最后的 callHook(vm, 'destroyed')
