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