2.14.1 什么是生命周期

所谓的生命周期是指：一个事物从出生到最终的死亡，整个经历的过程叫做生命周期。
例如人的生命周期：
(1) 出生：打疫苗
(2) 3 岁了：上幼儿园
(3) 6 岁了：上小学
(4) 12 岁了：上初中
(5) ……
(6) 55 岁了：退休
(7) ……
(8) 临终：遗嘱
(9) 死亡：火化

可以看到，在这个生命线上有很多不同的时间节点，在不同的时间节点上去做不同的事儿。

Vue 的生命周期指的是：vm 对象从创建到最终销毁的整个过程。
(1) 虚拟 DOM 在内存中就绪时：去调用一个 a 函数
(2) 虚拟 DOM 转换成真实 DOM 渲染到页面时：去调用一个 b 函数
(3) Vue 的 data 发生改变时：去调用一个 c 函数
(4) ……
(5) Vue 实例被销毁时：去调用一个 x 函数
在生命线上的函数叫做钩子函数，这些函数是不需要程序员手动调用的，由 Vue 自动调用，程序员只需要按照自己的需求写上，到了那个时间点自动就会执行。

2.14.2 掌握 Vue 的生命周期有什么用

研究 Vue 的生命周期主要是研究：在不同的时刻 Vue 做了哪些不同的事儿。
例如：在 vm 被销毁之前，我需要将绑定到元素上的自定义事件全部解绑，那么这个解绑的代码就需要找一 个地方写一下，写到哪里呢？你可以写到 beforeDestroy()这个函数中，这个函数会被 Vue 自动调用，而且是在 vm对象销毁前被自动调用。像这种在不同时刻被自动调用的函数称为钩子函数。每一个钩子函数都有对应的调用时间节点。
换句话说，研究 Vue 的生命周期主要研究的核心是：在哪个时刻调用了哪个钩子函数。

2.14.3 Vue 生命周期的 4 个阶段 8 个钩子

Vue 的生命周期可以被划分为 4 个阶段：初始阶段、挂载阶段、更新阶段、销毁阶段。
每个阶段会调用两个钩子函数。两个钩子函数名的特点：beforeXxx()、xxxed()。
8 个生命周期钩子函数分别是：
(1) 初始阶段
① beforeCreate() 创建前
②created() 创建后
(2) 挂载阶段
①beforeMount() 挂载前
②mounted() 挂载后
(3) 更新阶段
①beforeUpdate() 更新前
②updated() 更新后
(4) 销毁阶段
① beforeDestroy() 销毁前
②destroyed() 销毁后
8 个钩子函数写在哪里？直接写在 Vue 构造函数的 options 对象当中。
Vue 官方的生命周期图
image.png
翻译后的生命周期图：
image.png

2.14.4 初始阶段做了什么事儿

做了这么几件事：
(1) 创建 Vue 实例 vm（此时 Vue 实例已经完成了创建，这是生命的起点）
(2) 初始化事件对象和生命周期（接产大夫正在给他洗澡）
(3) 调用 beforeCreate()钩子函数（此时还无法通过 vm 去访问 data 对象的属性）
(4) 初始化数据代理和数据监测
(5) 调用 created()钩子函数（此时数据代理和数据监测创建完毕，已经可以通过 vm 访问 data 对象的属性）
(6) 编译模板语句生成虚拟 DOM（此时虚拟 DOM 已经生成，但页面上还没有渲染）
该阶段适合做什么？
beforeCreate：可以在此时加一些 loading 效果。
created：结束 loading 效果。也可以在此时发送一些网络请求，获取数据。也可以在这里添加定时器。

2.14.5 挂载阶段做了什么事儿

做了这么几件事：
(1) 调用 beforeMount()钩子函数（此时页面还未渲染，真实 DOM 还未生成）
(2) 给 vm 追加$el 属性，用它来代替”el”，$el 代表了真实的 DOM 元素（此时真实 DOM 生成，页面渲染完成）
(3) 调用 mounted()钩子函数
该阶段适合做什么？
mounted：可以操作页面的 DOM 元素了。

2.14.6 更新阶段做了什么事儿

做了这么几件事：
(1) data 发生变化（这是该阶段开始的标志）
(2) 调用 beforeUpdate()钩子函数（此时只是内存中的数据发生变化，页面还未更新）
(3) 虚拟 DOM 重新渲染和修补
(4) 调用 updated()钩子函数（此时页面已更新）
该阶段适合做什么？
beforeUpdate：适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：页面更新后，如果想对数据做统一处理，可以在这里完成。

2.14.7 销毁阶段做了什么事儿

做了这么几件事：
(1) vm.$destroy()方法被调用（这是该阶段开始的标志）
(2) 调用 beforeDestroy()钩子函数（此时 Vue 实例还在。虽然 vm 上的监视器、vm 上的子组件、vm 上 的自定义事件监听器还在，但是它们都已经不能用了。此时修改 data 也不会重新渲染页面了）
(3) 卸载子组件和监视器、解绑自定义事件监听器
(4) 调用 destroyed()钩子函数（虽然 destroyed 翻译为已销毁，但此时 Vue 实例还在，空间并没有释 放，只不过马上要释放了，这里的已销毁指的是 vm 对象上所有的东西都已经解绑完成了）
该阶段适合做什么？
beforeDestroy：适合做销毁前的准备工作，和人临终前写遗嘱类似。例如：可以在这里清除定时器。