生命周期钩子概述
了解两个 Vue 生命周期钩子。
在本课程的第一章中，我们将探讨生命周期钩子。它们是每个组件在其不同存在阶段自动调用的方法。这些钩子可以在初始化时执行逻辑，也可以在清理阶段发挥作用，从而实现丰富的交互体验。
组件的生命历程
通常，我们将组件的生命历程分为三个阶段：
- 初始化：包括组件的设置和模板的渲染。
- 运行期：用户可以与组件或应用进行交互的阶段。
- 销毁：移除模板并结束实例的过程。
每个阶段都包含一组生命周期钩子。在初始化和销毁阶段，这些钩子的触发时机非常明确；而在运行期，某些钩子可能在任意时间被调用，甚至在组件的生命周期中多次执行。我们首先来看初始化阶段。
组件的初始化
下面这个挑战旨在检验我们对生命周期钩子已有理解的程度。请尝试将组件初始化过程中的各个步骤按正确的顺序排列。
顺序排列可视化
这些设置钩子使我们能够精准地定位到流程中的特定位置，从而精细调整应用程序的行为。然而，这种灵活性也伴随着风险——如果为某些逻辑错误地使用了钩子，可能会对性能或用户体验造成负面影响。这一点在销毁过程中同样适用。
组件的销毁
销毁过程描述了 Vue 在移除组件时所执行的操作。多种情况可能导致 Vue 移除一个组件，但大多数情况下的行为是相同的。当然，也有例外，比如 <keep-alive>。
现在，我们将重复之前针对初始化阶段的练习，来重新梳理组件销毁过程中的各个步骤。请尝试将这些步骤按正确的顺序排列：
顺序排列可视化
至此，我们已经涵盖了组件生命周期的首尾两个阶段。这两个阶段都是自动执行的，且在一定程度上由系统而非用户直接触发：初始化发生在渲染时，而销毁则在组件不再需要时发生。此外，还有一个阶段尚未讨论——即组件与用户互动的阶段。
组件的运行期
当组件处于活跃使用状态时，也会触发一些生命周期钩子。例如，beforeUpdate 和 updated 钩子会在 DOM 更新时被调用，而 activated 和 deactivated 钩子则与 <keep-alive> 配合使用。
更新钩子与其他钩子的关键区别在于：更新钩子可能在任何时刻被触发。这是因为其触发时机取决于用户的交互以及组件自身的动态行为。