事物从创建到消逝的过程就是生命周期,就像人一样,从出生到死去,这一个阶段就相当于是人的生命周期。Vue的生命周期表示的是Vue内部从初始化到挂载DOM的完整流程。包括以下过程

  1. 开始创建
  2. 初始化数据
  3. 编译模板(parse,optimize,genrate)
  4. 挂载DOM
  5. 渲染更新
  6. 渲染卸载

Vue的生命周期

https://jonny-wei.github.io/blog/images/vue/vue生命周期钩子.png

vue的生命周期大致分为四个阶段,初始化阶段模板编译阶段挂载阶段销毁阶段

初始化阶段

初始化阶段为Vue实例初始化属性,事件以及响应式数据,包括两个生命周期钩子

  1. beforeCreate
  2. created

beforeCreate

在这个钩子函数之前已经初始化了一些默认的事件还有生命周期(Init events && lifecycle),在这个钩子函数执行的时候,data和methods中的数据都还未初始化。这个阶段一般用来初始化非响应式变量。

created

此时data和methods都已经初始化好了,data中的数据通过Object.defineProperty(vue2),Proxy(vue3)完成了数据绑定。此时真实DOM还没有生成,$el还不可用。这个阶段一般用来进行异步请求。

模板编译阶段