当前位置：首页 > article >正文

Vue 生命周期函数

article 2024/11/14 14:53:31

Vue 的生命周期是指 Vue 实例从创建到销毁的过程。生命周期中的各个钩子函数让我们可以在 Vue 实例的不同状态下执行特定的操作。了解生命周期有助于在合适的时机执行数据初始化、资源清理等操作，提高应用的效率和性能。

以下是 Vue 组件的完整生命周期流程，以及各个钩子函数的作用：

1. Vue 生命周期流程概述

Vue 生命周期从实例创建到销毁大致可以分为四个阶段：

创建阶段：实例被创建，数据和事件被初始化。
挂载阶段：实例挂载到页面，模板渲染成真实的 DOM。
更新阶段：数据变化导致组件重新渲染。
销毁阶段：组件销毁，解绑事件，清理资源。

2. Vue 生命周期钩子函数及其用途

下面是各个生命周期钩子函数的作用和典型用法：

创建阶段

beforeCreate：
- 在实例初始化之后、数据观测和事件配置之前调用。
- 此时 data 和 methods 中的数据尚未初始化。
- 常用场景：无法在此钩子中访问 data、computed 等，因此较少使用。
created：
- 在实例创建完成后立即调用，此时已经可以访问 data 和 methods。
- 常用场景：用于请求初始化数据、在实例加载时执行某些任务。
- 注意：此时模板尚未渲染，DOM 结构还不可用。
```
created() {
  console.log("实例已创建，data 可访问:", this.someData);
  this.fetchData();
}
```

挂载阶段

beforeMount：
- 在挂载开始之前调用，此时 template 模板已经编译。
- 常用场景：在即将挂载时执行最后的修改，但通常较少使用。
- 注意：此时 DOM 还未挂载。
mounted：
- 在挂载结束后调用，此时组件 DOM 已生成并被渲染。
- 常用场景：获取 DOM 元素进行操作，或依赖 DOM 的第三方库（如图表、动画等）。
- 注意：只会在初次挂载时执行一次。
```
mounted() {
  console.log("组件已挂载到 DOM，可以操作 DOM 元素了");
  this.initializeChart();
}
```

更新阶段

beforeUpdate：
- 在数据变化、更新渲染之前调用。
- 常用场景：在虚拟 DOM 重新渲染之前执行一些操作，通常用于调试。
updated：
- 在重新渲染和更新 DOM 后调用。
- 常用场景：当数据更新导致 DOM 变化时，执行一些依赖于 DOM 变化的操作。
- 注意：不建议在此钩子中直接操作数据，可能导致无限更新循环。
```
updated() {
  console.log("组件已更新");
  this.updateChartData();
}
```

销毁阶段

beforeDestroy：
- 在实例销毁之前调用，此时实例仍然完整可用。
- 常用场景：清理定时器、移除事件监听等。

destroyed：

实例销毁后调用，所有事件监听、子实例等都会被移除。
常用场景：执行彻底的资源清理，避免内存泄漏。

beforeDestroy() {
  console.log("即将销毁实例，清理定时器和事件");
  clearInterval(this.timer);
},
destroyed() {
  console.log("实例已销毁，资源已清理");
}

3. 生命周期钩子调用顺序

Vue 实例的生命周期钩子调用顺序如下：

创建阶段：beforeCreate → created
挂载阶段：beforeMount → mounted
更新阶段：beforeUpdate → updated（每次数据更新都会触发）
销毁阶段：beforeDestroy → destroyed

4. 生命周期钩子图示

                 创建阶段               挂载阶段               更新阶段              销毁阶段
                +----------+         +------------+        +-----------+          +---------+
                |beforeCreate|       | beforeMount |       |beforeUpdate|         |beforeDestroy|
                +----------+         +------------+        +-----------+          +---------+
                       |                   |                     |                      |
                       V                   V                     V                      V
                +----------+         +-----------+         +---------+          +---------+
                | created |        | mounted |         | updated  |          | destroyed |
                +----------+         +-----------+         +---------+          +---------+