2.4 扩展：理解Vue.js 3的生命周期钩子

Vue.js 3中的生命周期钩子是指在组件实例的创建、更新、销毁等过程中，自动调用的一系列方法，包括“beforeCreate”，“created”，“beforeMount”，“mounted”，“beforeUpdate”，“updated”，“beforeUnmount”，“unmounted”。通过这些钩子函数，可以在组件的不同生命周期阶段执行特定的操作。

（1）生命周期

（2）生命周期钩子函数

• beforeCreate：

• 这个阶段发生在实例初始化的最早期。

• 此时组件实例刚刚被创建，还没有完成选项的处理和配置。

• 不能访问“data”、“computed”、“methods” 或 “ref”。

• 通常很少在这个钩子中编写实际的业务逻辑。

• created：

• 组件实例已经创建完成，所有的选项（包括 data、computed、methods 等）都已配置好。

• 可以进行一些不依赖于DOM的初始化操作，比如发送异步请求获取数据。

• 仍然无法访问DOM元素。

• beforeMount：

• 在组件即将被挂载到DOM之前调用。

• 此时模板已经编译完成，但尚未渲染到真实的DOM中。

• 可以在这个阶段做一些最后的准备工作。

• mounted：

• 组件已经被挂载到DOM上，所有的DOM操作都可以在此进行。

• 通常用于执行与DOM相关的初始化，比如设置事件监听、初始化第三方库等。

• 可以获取到真实的DOM元素，并对其进行操作。

• beforeUpdate：

• 当数据发生变化，导致组件需要重新渲染时，在虚拟DOM重新渲染之前调用。

• 可以在此阶段获取到变化前的状态，以便进行一些比较或处理。

• updated：

• 组件重新渲染完成，虚拟DOM已经更新并应用到真实DOM之后调用。

💡 注意：

应避免在updated这个钩子中实现会导致组件再次更新的操作，以防出现陷入死循环的情况。

• beforeUnmount：

• 在组件即将被销毁之前调用。

• 可以在这里执行一些清理操作，例如移除事件监听、取消定时器等。

• unmounted：

• 组件已经被销毁，相关的资源和副作用都已被清理。

2.5 扩展：理解Vue.js 3的侦听器

侦听器用于监听响应式数据的变化，并在数据变化时执行相应的回调函数。侦听器可以通过以下几种方式创建：

（1）选项式 API 中的“watch”选项：

• 监听单个数据源：可以直接指定要监听的数据属性，并提供一个回调函数来处理变化，示例代码如下。

• 监听多个数据源：可以通过对象形式同时监听多个数据属性，示例代码如下。

• 深度监听对象属性：对于对象类型的数据，如果要深度监听其内部属性的变化，可以设置“deep: true”属性，示例代码如下。

• 立即执行侦听器：通过设置“immediate: true”属性，可以让侦听器在组件创建时立即执行一次。

（2）组合式 API 中的“watch”选项：

• 监听单个数据源：示例代码如下。

• 监听多个数据源：可以传递一个数组作为第一个参数来监听多个数据源，示例代码如下。

• 监听计算属性：示例代码如下。

创作说明

名称：编程指南-Vue.js 3前端开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙