VueJS 运行过程

了解生命周期的目的

通过了解Vue对象的生命周期，可以加深对Vuejs的了解，知道哪些步骤具体发生在哪个阶段，进而可以快速找到业务的最佳解决方案；当然了，最重要的，人类毕竟是求知欲望很强的生物。

对于单个Vue对象的生命周期

借用官方一张图：

我喜欢把Vue的生命周期分为：

1. 初始化阶段
2. 编译阶段
3. 挂载阶段
4. 监听阶段
5. 注销阶段

初始化阶段

这个阶段主要是把普通对象转化为响应式对象。

比如options.data、options.computed、options.watch等将会通过API：Object.defineProperty()转化为响应式的属性。期间options.data还会被挂载到vm._data，并通过代理的方式映射到vm的属性上，所以我们可以访问和设置this[key]的值。

编译阶段

编译阶段会把options.template编译成render函数。

编译阶段分三步：

1. parse，将 template 模板中进行字符串解析，得到指令、class、style等数据，形成 AST
2. optimize，这个阶段用于优化patch阶段，标记节点的 static 属性是否是静态的
3. generate，将 AST 转化成 render funtion 字符串，最终得到 render 的字符串以及 staticRenderFns 字符串

如果使用webpage等构件工具的话，预编译阶段将会在打包过程中已经执行过了

挂载阶段

这个阶段会执行render函数以获取vnode。

然后模板引擎根据vnode去生成真实DOM，如果解析到组件vnode（component-vnode）将会实例化组件——也就是初始化、编译、挂载组件。

监听阶段

挂载阶段之后，模板引擎已经渲染好网页，这时就进入了监听阶段。

这个阶段主要响应用户的行为，并触发重新执行render函数，patch函数还会对比新旧vnode，并计算出更新DOM需要的操作。最后由框架更新到网页上。

注销阶段

注销过程会先触发beforeDestroy，然后注销掉watchers、child components、event listeners等，之后是destroyed钩子函数。

对于多个Vue对象的生命周期

下面我们看看父子组件和兄弟组件的生命周期之间的关系。

假设Parent组件是Root组件，child1和child2是其子组件。

它们的生命周期运行顺序如下：

beforeCreate Parent
created Parent
beforeMount Parent
beforeCreate child1
created child1
beforeMount child1
beforeCreate child2
created child2
beforeMount child2
mounted child1
mounted child2
mounted Parent
复制代码

由于每个组件都是独立更新的，所以一个组件的更新仅会触发该组件的beforeupdate、update、updated阶段。

参考

Vue.js 技术揭秘