一、什么是生命周期钩子函数？
生命周期钩子函数是Vue组件在不同阶段自动调用的函数，用于执行特定的逻辑，比如初始化数据、DOM操作、清理资源等。在Vue 2中，我们通常在组件的选项对象中定义这些钩子：
export default {
created() {
// 组件实例创建后执行
},
mounted() {
// 组件挂载到DOM后执行
},
beforeUnmount() {
// 组件卸载前执行
}
}而在Vue 3的组合式API中，生命周期钩子函数变成了可以在setup函数内直接调用的函数，更加灵活。
二、Vue 3组合式API中的生命周期钩子函数
Vue 3为组合式API提供了一系列对应的生命周期钩子函数，这些函数需要从vue包中导入使用。常用的生命周期钩子函数包括：
| 钩子函数 | 说明 |
|---|---|
onBeforeMount |
组件挂载之前调用 |
onMounted |
组件挂载完成后调用 |
onBeforeUpdate |
组件更新之前调用 |
onUpdated |
组件更新完成后调用 |
onBeforeUnmount |
组件卸载之前调用 |
onUnmounted |
组件卸载后调用 |
onActivated |
keep-alive组件激活时调用 |
onDeactivated |
keep-alive组件停用时调用 |
onErrorCaptured |
捕获子组件错误时调用 |
三、如何使用组合式生命周期钩子函数？
1. 导入钩子函数
import { onMounted, onUnmounted } from 'vue';2. 在setup函数中调用
export default {
setup() {
onMounted(() => {
console.log('组件已挂载');
});
onUnmounted(() => {
console.log('组件已卸载');
});
return {};
}
}这样写的好处是，生命周期钩子函数可以和响应式状态、计算属性、方法等逻辑混合在一起，形成高度内聚的代码块。
四、示例：使用onMounted和onUnmounted实现计时器
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const count = ref(0);
let timer = null;
onMounted(() => {
timer = setInterval(() => {
count.value++;
}, 1000);
});
onUnmounted(() => {
clearInterval(timer);
});
return {
count
};
}
}这段代码展示了如何在组件挂载时启动计时器，并在组件卸载时清理计时器，避免内存泄漏。
五、总结
- Vue 3组合式API中的生命周期钩子函数需要从
vue导入使用。 - 这些钩子函数都在
setup函数内调用，方便将生命周期逻辑与组件状态紧密结合。 - 组合式API的生命周期钩子使代码更加模块化、易于维护，特别适合大型项目和复杂组件。