生命周期

生命周期 (Lifecycle Hooks)

Vue3 的生命周期钩子是 Vue 实例从创建到销毁的过程中, 会触发一系列的函数; 这些函数被称为生命周期钩子, 它们可以在特定的阶段执行一些操作, 例如数据初始化、事件监听、计算属性等; 在 Vue3 中，组合式 API 提供了一套全新的生命周期钩子函数，用于替代 Vue2 中的 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed 等生命周期钩子。这些新的生命周期钩子函数使得组件的编写更加简洁和灵活。

常用钩子函数

1. onMounted

钩子函数在组件挂载后被调用，可以用于执行一些初始化操作，比如发送网络请求、订阅事件等。

2. onUpdated

钩子函数在组件更新后被调用，可以用于响应数据的变化，或执行其他需要根据组件状态而更新的操作。

3. onUnmounted

钩子函数在组件卸载前被调用，可以用于清理定时器、取消订阅事件或释放其他资源。

示例

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from "vue";

const message = ref("Hello, Vue 3!");

// 在组件挂载时被调用
onMounted(() => {
  console.log("Component mounted");
});

// 在组件更新时被调用
onUpdated(() => {
  console.log("Component updated");
});

// 在组件卸载时被调用
onUnmounted(() => {
  console.log("Component unmounted");
});
</script>

除了示例中的这些钩子函数外，Vue 3 还提供了其他生命周期钩子函数，如 onBeforeMount、onBeforeUpdate、onDeactivated 等。

全部钩子函数

以下是这 12 个生命周期钩子的详细介绍

1. 挂载 onMounted

在组件实例被挂载到 DOM 后立即调用。此时可以访问 DOM 元素和数据。

<script setup>
import { onMounted } from "vue";
// 在组件挂载时被调用
onMounted(() => {
  console.log("Component mounted");
});
</script>

2. 更新 onUpdated

在组件的数据发生变化时调用。可以通过比较新旧值来判断数据是否发生了变化。

<script setup>
import { onUpdated } from "vue";
// 组件的数据发生变化时调用
onUpdated(() => {
  console.log("数据已更新");
});
</script>

3. 卸载 onUnmounted

在组件实例被卸载（销毁）之前调用。可以在此处执行清理操作，如取消事件监听、清除定时器等。

<script setup>
import { onUnmounted } from "vue";
// 组件实例被卸载（销毁）之前调用
onUnmounted(() => {
  console.log("组件即将卸载");
});
</script>

4. 挂载前 onBeforeMount

在组件实例被挂载到 DOM 之前调用。可以在此处执行一些准备工作，如获取数据、设置初始状态等。

<script setup>
import { onBeforeMount } from "vue";
// 组件实例被挂载到 DOM 之前调用
onBeforeMount(() => {
  console.log("组件即将挂载");
});
</script>

5. 更新前 onBeforeUpdate

在组件实例的数据发生变化之前调用。可以在此处执行一些准备工作，如验证数据、格式化数据等。

<script setup>
import { onBeforeUpdate } from "vue";
// 组件实例的数据发生变化之前调用
onBeforeUpdate(() => {
  console.log("组件即将更新");
});
</script>

6. 卸载前 onBeforeUnmount

在组件实例被卸载（销毁）之前调用。可以在此处执行一些准备工作，如取消事件监听、清除定时器等。

<script setup>
import { onBeforeUnmount } from "vue";
// 组件实例被卸载（销毁）之前调用
onBeforeUnmount(() => {
  console.log("组件即将卸载");
});
</script>

7. 错误 onErrorCaptured

在捕获到组件内的错误时调用。可以在此处处理错误，或将错误传递给父组件。

错误可以从以下几个来源中捕获：

• 组件渲染
• 事件处理器
• 生命周期钩子
• setup() 函数
• 侦听器
• 自定义指令钩子
• 过渡钩子

这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。

<script setup>
import { onErrorCaptured } from "vue";
// 捕获到组件内的错误时调用
onErrorCaptured((error) => {
  console.log("捕获到错误", error);
});
</script>

错误传递规则

• 默认情况下，所有的错误都会被发送到应用级的 app.config.errorHandler

• 错误“向上传递”，类似于原生 DOM 事件的冒泡机制。

• errorCaptured 钩子可以通过返回 false 来阻止错误继续向上传递。即表示“这个错误已经被处理了，应当被忽略”

8. 跟踪 onRenderTracked

在组件的渲染过程中跟踪响应式依赖时调用。可以在此处执行一些与渲染相关的操作，如记录日志、性能监控等。

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用

<script setup>
import { onRenderTracked } from "vue";
// 组件的渲染过程中跟踪响应式依赖时调用
onRenderTracked(() => {
  console.log("组件正在渲染");
});
</script>

9. 触发 onRenderTriggered

在组件的渲染过程中触发响应式依赖时调用。可以在此处执行一些与渲染相关的操作，如记录日志、性能监控等。

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用

<script setup>
import { onRenderTriggered } from "vue";
// 组件的渲染过程中触发响应式依赖时调用
onRenderTriggered(() => {
  console.log("组件渲染完成");
});
</script>

10. 激活缓存 onActivated

在组件被激活（显示）时调用。可以在此处执行一些与组件激活相关的操作，如发送网络请求、初始化数据等。

这个钩子在服务器端渲染期间不会被调用

<script setup>
import { onActivated } from "vue";
// 组件被激活（显示）时调用
onActivated(() => {
  console.log("组件已激活");
});
</script>

11. 停用缓存 onDeactivated

在组件被停用（隐藏）时调用。可以在此处执行一些与组件停用相关的操作，如清除定时器、取消网络请求等。

这个钩子在服务器端渲染期间不会被调用

<script setup>
import { onDeactivated } from "vue";
// 组件被停用（隐藏）时调用
onDeactivated(() => {
  console.log("组件已停用");
});
</script>

12. 服务端渲染 onServerPrefetch

在服务器端预取组件时调用。可以在此处执行一些与预取相关的操作，如获取数据、计算属性等。注意，这个方法仅在服务器端渲染时有效。

<script setup>
import { onServerPrefetch } from "vue";
// 组服务器端预取组件时调用
onServerPrefetch(async () => {
  console.log("组件正在预取");
  const data = await fetchData();
  console.log("预取完成", data);
});
</script>

参考

组合式 API：生命周期钩子