---

一、前言

在 Vue 3 中，由于引入了 Composition API，生命周期钩子函数的使用方式略有变化。下面是 Vue 3 中常见的生命周期钩子函数以及它们对应的 Composition API 函数：

1、介绍

1. setup：在组件实例初始化之前调用。在 setup 中可以进行响应式变量的声明和初始化工作。

2. onBeforeMount：在挂载之前调用。

3. onMounted：在挂载之后调用。可以进行一些需要使用 DOM 的操作，比如初始化某些插件、发送网络请求等。

4. onBeforeUpdate：在更新之前调用。在这里可以进行一些在数据变化之前需要执行的逻辑。

5. onUpdated：在更新之后调用。通常用于执行一些需要在更新之后立即执行的操作。

6. onBeforeUnmount：在卸载之前调用。通常用于清理一些定时器、取消订阅等操作。

7. 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>

在这个示例中，我们演示了各个生命周期钩子函数的使用，并在每个钩子函数中输出了相应的日志信息。