Vue 3 中生命周期钩子函数在创建、更新和销毁组件时触发，分别用于：创建阶段：beforeCreate（实例化前）、created（实例化后）挂载阶段：beforeMount（编译前）、mounted（挂载后）更新阶段：beforeUpdate、updated（更新后）卸载阶段：beforeUnmount（卸载前）、unmounted（卸载后）

Vue 3 生命周期

Vue 3 中的生命周期钩子函数用于响应组件在创建、更新和销毁过程中发生的特定事件。这些钩子函数提供了在不同生命周期阶段自定义和控制组件行为的机制。

Vue 3 生命周期阶段

Vue 3 的生命周期可分为三个主要阶段：

1. 创建阶段

• beforeCreate: 在组件实例化之前调用。
• created: 在组件实例创建后，但模板编译之前调用。

2. 挂载阶段

• beforeMount: 在模板编译和挂载组件到 DOM 之前调用。
• mounted: 在组件挂载到 DOM 后调用。

3. 更新阶段

Vue工具箱(免费版)

规避 Vue 3 常见陷阱：响应式、ref 与 reactive、computed 时机与组合式 API 优选实践。

下载

• beforeUpdate: 在组件更新之前调用。
• updated: 在组件更新后调用。

4. 卸载阶段

• beforeUnmount: 在组件卸载之前调用。
• unmounted: 在组件从 DOM 中卸载后调用。

钩子函数用途

生命周期钩子函数在以下场景中非常有用：

• 初始化组件数据和状态（created）
• 操纵 DOM（mounted、updated）
• 执行网络请求（mounted、updated）
• 销毁组件（beforeUnmount、unmounted）

示例使用

以下是一个示例，展示了如何使用 mounted 和 updated 钩子函数：

export default {
  mounted() {
    // 在组件挂载后执行一些动作，例如获取数据
    this.fetchData();
  },
  updated() {
    // 在组件更新后执行一些动作，例如更新 DOM
    this.$refs.myRef.style.color = 'red';
  },
};

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！