vue3生命周期如何使用

Vue 3 的生命周期函数与 Vue 2 有所不同，主要是通过 Composition API 来实现。下面是 Vue 3 中常用的生命周期函数及其使用方式：

1. `setup`：在组件创建之前调用，用于设置组件的初始状态和逻辑。可以返回一个对象，该对象中的属性和方法将会被暴露给组件的模板和其他组件使用。

2. `onBeforeMount`：在组件挂载到 DOM 之前调用，可以在这个钩子函数中进行一些准备工作。

3. `onMounted`：在组件挂载到 DOM 后调用，可以在这个钩子函数中进行一些需要 DOM 元素的操作，比如初始化第三方库、发送网络请求等。

4. `onBeforeUpdate`：在组件更新之前调用，可以在这个钩子函数中进行一些更新前的准备工作。

5. `onUpdated`：在组件更新完成后调用，可以在这个钩子函数中进行一些更新后的操作。

6. `onBeforeUnmount`：在组件卸载之前调用，可以在这个钩子函数中进行一些清理工作。

7. `onUnmounted`：在组件卸载后调用，可以在这个钩子函数中进行一些清理后的操作。

下面是一个示例代码，展示了如何使用 Vue 3 的生命周期函数：

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    // 在组件挂载时调用
    onMounted(() => {
      console.log('组件挂载到 DOM');
    });

    // 在组件卸载时调用
    onUnmounted(() => {
      console.log('组件从 DOM 卸载');
    });

    return {
      // 返回的属性和方法将会被暴露给组件的模板和其他组件使用
      message: 'Hello, Vue 3!',
      handleClick() {
        console.log('按钮被点击');
      },
    };
  },
};