vue3 生命周期钩子

在 Vue 3 中，生命周期钩子函数的命名和使用方式有所变化。下面是一些常用的生命周期钩子函数及其对应的 Vue 3 写法：

- `beforeCreate` -> 使用 `setup()` 函数来初始化数据和设置侦听器，此时实例还未被创建。
- `created` -> 在 `setup()` 函数中进行更多的初始化工作，此时实例已被创建。
- `beforeMount` -> 使用 `onBeforeMount` 函数来注册在挂载之前要执行的逻辑。
- `mounted` -> 使用 `onMounted` 函数来注册在挂载之后要执行的逻辑。
- `beforeUpdate` -> 使用 `onBeforeUpdate` 函数来注册在更新之前要执行的逻辑。
- `updated` -> 使用 `onUpdated` 函数来注册在更新之后要执行的逻辑。
- `beforeUnmount` -> 使用 `onBeforeUnmount` 函数来注册在卸载之前要执行的逻辑。
- `unmounted` -> 使用 `onUnmounted` 函数来注册在卸载之后要执行的逻辑。

Vue 3 中还引入了一些新的生命周期钩子函数：

- `beforeUnmount` -> 使用 `onBeforeUnmount` 函数来注册在卸载之前要执行的逻辑。
- `unmounted` -> 使用 `onUnmounted` 函数来注册在卸载之后要执行的逻辑。
- `errorCaptured` -> 使用 `onErrorCaptured` 函数来注册在捕获错误时要执行的逻辑。

需要注意的是，Vue 3 中的生命周期钩子函数不再作为实例方法，而是作为普通函数进行注册。例如：

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue';

// 在 setup() 函数中注册生命周期钩子
setup() {
  onBeforeMount(() => {
    // 在挂载之前执行的逻辑
  });

  onMounted(() => {
    // 在挂载之后执行的逻辑
  });

  onBeforeUpdate(() => {
    // 在更新之前执行的逻辑
  });

  onUpdated(() => {
    // 在更新之后执行的逻辑
  });

  onBeforeUnmount(() => {
    // 在卸载之前执行的逻辑
  });

  onUnmounted(() => {
    // 在卸载之后执行的逻辑
  });

  onErrorCaptured((error) => {
    // 错误捕获逻辑
  });
}

通过使用这些生命周期钩子函数，你可以在 Vue 3 中控制组件的初始化、挂载、更新、卸载等不同阶段的逻辑。