十九、生命周期

（一）含义

• 又名：生命周期回调函数、生命周期函数、生命周期钩子
• 是什么：Vue 在关键时刻帮我们调用的一些特殊名称的函数
• 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
• 生命周期函数中的 this 指向是 vm 或 组件实例对象

（二）类比理解

张三的一生（张三的生命周期）	vm 的一生（vm 的生命周期）
将要出生	将要创建 ===> 调用 beforeCreate 函数
/	创建完毕 ===> 调用 created 函数
/	将要挂载 ===> 调用 beforeMount 函数
呱呱坠地 ===> 检查身体各项指标	挂载完毕 ===> 调用 mounted 函数（重要的钩子）
学会说话	将要更新 ===> 调用 beforeUpdate 函数
学会走路	更新完毕 ===> 调用 updated 函数
......	......
......	......
将要永别 ===> 交代后事	将要销毁 ===> 调用 beforeDestroy 函数（重要的钩子）
已经永别	销毁完毕 ===> 调用 destroyed 函数

（三）常用的生命周期钩子

1.mounted

• 发送 Ajax 请求、启动定时器、绑定自定义事件、订阅消息等 初始化操作

2.beforeDestroy

• 清除定时器、解绑自定义事件、取消订阅消息等 收尾工作

（四）关于销毁 Vue 实例

• 销毁后借助 Vue 开发者工具看不到任何信息
• 销毁后自定义事件会失效，但原生 DOM 事件依然有效
• 一般不会在 beforeDestroy 操作数据，因为即使操作数据也不会触发更新流程了

（五）生命周期图示

1.挂载流程

• new Vue({})
• Init Events & Lifecycle：初始化生命周期、事件，但数据代理还未开始
• 【beforeCreate】：无法 通过 vm 访问到 data 中的数据和 methods 中的方法
• Init injections & reactivity：初始化数据监测、数据代理
• 【created】：可以 通过 vm 访问到 data 中的数据和 methods 中的方法
• Has "el" option? =>
  • No => when vm.$mount(el) is called =>
  • Yes =>
  • Has "template" option?
    • Yes => Compile template into render function
    • No => Compile el's outerHTML as template
  • 上述阶段 Vue 开始解析模板，生成虚拟 DOM（内存中），页面还不能显示解析好的内容
• 【beforeMount】：
  • 页面呈现的是 未经 Vue 编译 的 DOM 结构
  • 所有对 DOM 的操作，最终都不奏效
• Create vm.$el and replace "el" with it：将内存中的虚拟 DOM 转为真实 DOM 插入页面
• 【mounted】：
  • 页面呈现的是 经过 Vue 编译 的 DOM
  • 对 DOM 的操作均有效（尽可能避免）
• 至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等 初始化操作

2.更新流程

• Mounted：When data changes =>
  • 【beforeUpdate】：此时数据是最新的，但页面是旧的，即：页面尚未和数据保持同步
  • Virtual DOM re-render and patch：根据新数据，生成新的虚拟 DOM，随后与旧的虚拟 DOM 进行比较，最终完成页面更新，即：完成了 Model → View 的更新
  • 【updated】：此时数据是最新的，页面也是新的，即：页面和数据保持同步
• When vm.$destroy() is called：由更新流程进入销毁流程

3.销毁流程

• 【beforeDestroy】：此时，vm 中所有的 data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段进行关闭定时器、取消订阅消息、解绑自定义事件等 收尾操作
• Teardown watchers, child components and event listeners
• Destroyed：
  • 【destroyed】