生命周期
生命周期 (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:生命周期钩子