vue3怎么写生命周期

在 3 中，生命周期钩子函数的名称和使用方式有所改变。下面是 Vue 3 中常用的生命周期钩子函数：

- `beforeCreate`: 组件实例刚被创建，实例的属性和方法还未被初始化。
- `created`: 组件实例已经创建完成，实例的属性和方法已经被初始化，但是 DOM 元素还未被创建。
- `beforeMount`: 组件挂载前，DOM 元素还未被创建。
- `mounted`: 组件挂载后，DOM 元素已经被创建。
- `beforeUpdate`: 组件更新前。
- `updated`: 组件更新后。
- `beforeUnmount`: 组件卸载前。
- `unmounted`: 组件卸载后。

在 Vue 3 中，我们可以使用 `setup` 函数来定义组件，该函数中可以使用 `onBeforeMount`、`onMounted`、`onBeforeUpdate`、`onUpdated`、`onBeforeUnmount` 和 `onUnmounted` 等函数来定义生命周期钩子函数，例如：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('mounted');
    });

    onUnmounted(() => {
      console.log('unmounted');
    });
  }
}

在上面的例子中，我们使用 `onMounted` 和 `onUnmounted` 函数来定义 `mounted` 和 `unmounted` 生命周期钩子函数。当组件挂载时，会输出 `mounted`，当组件卸载时，会输出 `unmounted`。