生命周期钩子

生命周期钩子

生命周期钩子是用于在不同阶段执行代码的函数。比如 onMounted 用于在组件被挂载后执行代码，onBeforeUnmount 用于在组件卸载前执行代码。这些钩子可以帮助您管理组件的行为和状态。

API 简介

这些 Vue 3 生命周期钩子可以按照它们在组件生命周期中的调用时机进行分类对比：

1. 创建阶段：

   • onBeforeMount：在挂载之前调用，用于准备工作。
   • onMounted：在组件实例挂载后调用，执行一次性初始化操作。

2. 更新阶段：

   • onBeforeUpdate：在数据更新之前调用，可用于更新前的准备工作。
   • onUpdated：在数据更新导致虚拟 DOM 重新渲染和打补丁之后调用。

3. 卸载阶段：

   • onBeforeUnmount：在卸载之前调用，用于执行清理操作。
   • onUnmounted：在组件实例被卸载后调用，用于清理工作。

4. 错误处理：

   • onErrorCaptured：捕获组件子树中任何错误，并展示错误信息。

5. 依赖追踪：

   • onRenderTracked：当响应式变量被追踪时触发回调。
   • onRenderTriggered：在依赖项更新导致重新渲染时触发。

6. Keep-alive 钩子：

   • onActivated：当 keep-alive 组件被激活时调用。
   • onDeactivated：当 keep-alive 组件被停用时调用。

7. 服务器端渲染：

   • onServerPrefetch：在服务器端渲染期间调用预取数据的函数。

API 示例

下面逐个详细介绍 Vue 3 中的生命周期钩子以及附带代码示例：

onMounted(callback)

在组件挂载后执行回调函数。

import { onMounted } from "vue";

onMounted(() => {
  console.log("组件已挂载");
});

onUpdated(callback)

在组件更新后执行回调函数。

import { onUpdated } from "vue";

onUpdated(() => {
  console.log("组件已更新");
});

onUnmounted(callback)

在组件卸载后执行回调函数。

import { onUnmounted } from "vue";

onUnmounted(() => {
  console.log("组件已卸载");
});

onBeforeMount(callback)

在组件挂载前执行回调函数。

import { onBeforeMount } from "vue";

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

onBeforeUpdate(callback)

在组件更新前执行回调函数。

import { onBeforeUpdate } from "vue";

onBeforeUpdate(() => {
  console.log("组件将要更新");
});

onBeforeUnmount(callback)

在组件卸载前执行回调函数。

import { onBeforeUnmount } from "vue";

onBeforeUnmount(() => {
  console.log("组件将要卸载");
});

onErrorCaptured(callback)

捕获子组件生命周期钩子中的错误。

import { onErrorCaptured } from "vue";

onErrorCaptured((error, vm, info) => {
  console.error("捕获到错误：", error, info);
});

onRenderTracked(callback)

跟踪渲染时依赖项的回调函数。

import { onRenderTracked } from "vue";

onRenderTracked((event) => {
  console.log("渲染被追踪：", event);
});

onRenderTriggered(callback)

渲染时触发的回调函数。

import { onRenderTriggered } from "vue";

onRenderTriggered((event) => {
  console.log("渲染被触发：", event);
});

onActivated(callback)

在组件被激活时执行回调函数（keep-alive 组件）。

import { onActivated } from "vue";

onActivated(() => {
  console.log("组件被激活");
});

onDeactivated(callback)

在组件被停用时执行回调函数（keep-alive 组件）。

import { onDeactivated } from "vue";

onDeactivated(() => {
  console.log("组件被停用");
});

onServerPrefetch(callback)

在服务器端渲染期间调用预取数据的函数。

import { onServerPrefetch } from "vue";

onServerPrefetch(async () => {
  // 执行服务端预取逻辑
});

这是对 Vue 3 生命周期钩子以及相应代码示例的详细介绍。