Vue 基础-生命周期(第三章)

wiki

Vue 在生命周期过程中,会主动调用一些特殊名函数,可以利用其来实现一些生命周期阶段的操作

生命周期

1. 生命周期阶段

  1. Init Event & Lifecycle : 初始化生命周期、事件,但数据代理还未开始,之后调用 beforeCreate 函数
  2. Init injections & reactivity : 初始化数据监测、数据代理,之后调用 created 函数
  3. 'el' & 'template' option : 此阶段开始解析模板,在内存中生成虚拟 DOM ,页面还未能展示解析后内容,之后调用 beforeMounte 函数
  4. Create vm.$el and replace 'el' with it : 将内存中的虚拟 DOM 转为真实 DOM 插入页面,之后调用 mounted 函数
  5. Mounted : 挂载

    5.1. 当数据改变时,接着调用 beforeUpdate

    5.2. 生成新 DOM 并与旧的进行比较,再重新渲染页面,接着调用 updated
  6. When vm.$destroy is called : 准备销毁阶段,之后调用 beforeDestroy 函数
  7. Teardown watchers,child components and events listenders : 销毁监视、子组件、监听器
  8. Destroyed : 销毁 Vue 实例,之后调用 destroyed 函数

2. 生命周期函数

  1. beforeCreate : 无法通过 vm 访问 datamethods 中数据、方法
  2. created : 可以通过 vm 访问 datamethods 中数据、方法
  3. beforeMounte : 此时页面呈现时未经 Vue 编译的 DOM 结构,所有 DOM 操作将不生效
  4. mounted : 页面呈现编译后的 DOM 结构,初始化阶段结束
  5. beforeUpdate : 此时数据是新的,但页面还未被替换
  6. updated : 此时数据与页面保持同步
  7. beforeDestroy : vm 中属性仍可使用
  8. destroyed : 销毁后调用