VueJS 运行过程

219 阅读2分钟

了解生命周期的目的

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

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

借用官方一张图:

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 技术揭秘