Appearance
1. 前言
在Vue
中,每个Vue
实例从被创建出来到最终被销毁都会经历一个过程,就像人一样,从出生到死亡。在这一过程里会发生许许多多的事,例如设置数据监听,编译模板,组件挂载等。在Vue
中,把Vue
实例从被创建出来到最终被销毁的这一过程称为Vue
实例的生命周期,同时,在Vue
实例生命周期的不同阶段Vue
还提供了不同的钩子函数,以方便用户在不同的生命周期阶段做一些额外的事情。那么,接下来的几篇文章我们就从源码角度深入剖析一下一个Vue
实例在从生到死的生命周期里到底都经历了些什么,每个阶段都做了哪些事情。
2. 生命周期流程图
下图是Vue
官网给出的Vue
实例的生命周期流程图,如下:
从图中我们可以看到,Vue
实例的生命周期大致可分为4个阶段:
- 初始化阶段:为
Vue
实例上初始化一些属性,事件以及响应式数据; - 模板编译阶段:将模板编译成渲染函数;
- 挂载阶段:将实例挂载到指定的
DOM
上,即将模板渲染到真实DOM
中; - 销毁阶段:将实例自身从父组件中删除,并取消依赖追踪及事件监听器;
3. 总结
本篇文章是生命周期篇的开篇综述,借用Vue
官网的生命周期流程图介绍了一个Vue
实例的生命周期大致可分为四个阶段,分别是初始化阶段、模板编译阶段、挂载阶段、销毁阶段。接下来的几篇文章我们就从这个流程图为基础,自上到下,从每个阶段入手,深入分析在每个阶段里都干了些什么。