Vue3生命周期函数

在 Vue 3 中，生命周期钩子函数是指组件从创建到销毁的整个过程中，Vue 自动调用的一些特定函数。它们让你能够在组件的不同阶段执行一些自定义操作。Vue 3 提供了组合式 API 和选项式 API 两种方式来定义生命周期钩子。

1. onBeforeMount (组合式 API)

• 作用：在组件挂载之前调用（即 DOM 渲染之前）。
• 用法：用于执行组件挂载前的准备工作。

import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('组件即将挂载');
});

2. onMounted (组合式 API)

• 作用：组件挂载完成后调用（即 DOM 渲染完成后）。
• 用法：可以用来执行依赖 DOM 的操作，例如获取 DOM 元素或初始化第三方库。

import { onMounted } from 'vue';

onMounted(() => {
  console.log('组件挂载完成');
});

3. onBeforeUpdate (组合式 API)

• 作用：在组件的响应式数据发生变化并重新渲染之前调用。
• 用法：用于访问数据变化前的状态，可以进行一些数据预处理。

import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('组件数据更新前');
});

4. onUpdated (组合式 API)

• 作用：在组件重新渲染后调用。
• 用法：当组件的响应式数据更新并且 DOM 被重新渲染后，可以执行一些 DOM 操作或更新。

import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('组件更新完成');
});

5. onBeforeUnmount (组合式 API)

• 作用：在组件销毁之前调用。
• 用法：适用于清理操作，如移除事件监听器、取消定时器等。

import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('组件销毁前');
});

6. onUnmounted (组合式 API)

• 作用：组件销毁后调用。
• 用法：可以在组件销毁后进行清理工作，例如清理全局事件、取消异步请求等。

import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('组件销毁后');
});

7. onErrorCaptured (组合式 API)

• 作用：捕获子组件中的错误并执行一些操作。
• 用法：用于全局错误处理。

import { onErrorCaptured } from 'vue';

onErrorCaptured((err, instance, info) => {
  console.error('捕获到错误：', err);
  return false; // 继续传递错误
});

Vue 3 生命周期钩子函数（选项式 API）

除了组合式 API，Vue 3 也保留了选项式 API 中的生命周期钩子。它们的名称和 Vue 2 中类似，如下所示：

• beforeCreate：组件实例创建之前。
• created：组件实例创建完成后。
• beforeMount：模板挂载之前。
• mounted：模板挂载完成后。
• beforeUpdate：数据发生变化之前。
• updated：数据发生变化之后。
• beforeDestroy：组件销毁之前。
• destroyed：组件销毁之后。

小结

Vue 3 的生命周期钩子函数允许你在组件的不同阶段进行自定义操作，从创建到销毁，每个阶段都有其特定的钩子。通过合理使用这些钩子函数，你可以更灵活地管理组件的状态和行为。