一、前言
在 Vue 3 中,由于引入了 Composition API,生命周期钩子函数的使用方式略有变化。下面是 Vue 3 中常见的生命周期钩子函数以及它们对应的 Composition API 函数:
1、介绍
-
setup:在组件实例初始化之前调用。在
setup
中可以进行响应式变量的声明和初始化工作。 -
onBeforeMount:在挂载之前调用。
-
onMounted:在挂载之后调用。可以进行一些需要使用 DOM 的操作,比如初始化某些插件、发送网络请求等。
-
onBeforeUpdate:在更新之前调用。在这里可以进行一些在数据变化之前需要执行的逻辑。
-
onUpdated:在更新之后调用。通常用于执行一些需要在更新之后立即执行的操作。
-
onBeforeUnmount:在卸载之前调用。通常用于清理一些定时器、取消订阅等操作。
-
onUnmounted:在卸载之后调用。可以执行一些清理工作,比如释放资源等。
2、示例
下面是一个简单的示例,演示了这些生命周期钩子函数的使用方式:
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">更新消息</button>
</div>
</template>
<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
// 在挂载之前调用
onBeforeMount(() => {
console.log('组件即将挂载');
});
// 在挂载之后调用
onMounted(() => {
console.log('组件已经挂载');
});
// 在更新之前调用
onBeforeUpdate(() => {
console.log('组件即将更新');
});
// 在更新之后调用
onUpdated(() => {
console.log('组件已经更新');
});
// 在卸载之前调用
onBeforeUnmount(() => {
console.log('组件即将卸载');
});
// 在卸载之后调用
onUnmounted(() => {
console.log('组件已经卸载');
});
const updateMessage = () => {
message.value = 'Hello, Vue 3 Updated!';
};
return {
message,
updateMessage
};
}
};
</script>
在这个示例中,我们演示了各个生命周期钩子函数的使用,并在每个钩子函数中输出了相应的日志信息。