学习Vue3中生命周期钩子函数

---

一、前言

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

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