vue3中使用生命周期

在 Vue 3 中，由于 Composition API 的引入，使用生命周期函数的方式有所改变。下面是 Vue 3 中使用生命周期的示例：

1. `setup` 函数：在组件初始化时调用，可以用于设置组件的初始状态和执行一些初始化逻辑。

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    // 相当于 Vue 2.x 的 beforeCreate
    console.log('组件初始化');

    // 相当于 Vue 2.x 的 created
    onMounted(() => {
      console.log('组件挂载');
    });

    // 相当于 Vue 2.x 的 beforeUpdate
    onUpdated(() => {
      console.log('组件更新');
    });

    // 相当于 Vue 2.x 的 beforeDestroy
    onUnmounted(() => {
      console.log('组件卸载');
    });
  },
};

2. `onBeforeMount` 和 `onMounted`：在组件挂载前后调用，可以用于执行一些需要在组件挂载前后完成的逻辑。

import { onBeforeMount, onMounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('组件即将挂载');
    });

    onMounted(() => {
      console.log('组件已经挂载');
    });
  },
};

3. `onBeforeUpdate` 和 `onUpdated`：在组件更新前后调用，可以用于执行一些需要在组件更新前后完成的逻辑。

import { onBeforeUpdate, onUpdated } from 'vue';

export default {
  setup() {
    onBeforeUpdate(() => {
      console.log('组件即将更新');
    });

    onUpdated(() => {
      console.log('组件已经更新');
    });
  },
};

4. `onBeforeUnmount` 和 `onUnmounted`：在组件卸载前后调用，可以用于执行一些需要在组件卸载前后完成的逻辑。

import { onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('组件即将卸载');
    });

    onUnmounted(() => {
      console.log('组件已经卸载');
    });
  },
};

这些是 Vue 3 中常用的生命周期函数的使用方式，可以根据具体需求选择合适的函数进行使用。