Vue3中的生命周期函数

1.onBeforeMount：在挂载开始之前调用，相关的 setup 函数首次被调用。

import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  // 在组件挂载之前执行的逻辑
});

2.onMounted：在挂载结束后调用，组件实例已经挂载到 DOM 上。

import { onMounted } from 'vue';

onMounted(() => {
  // 在组件挂载完成后执行的逻辑
});

3.onBeforeUpdate：在更新开始之前调用，相关的响应式依赖发生更新。

import { onBeforeUpdate } from 'vue';

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

4.onUpdated：在更新结束之后调用，DOM 已经更新。

import { onUpdated } from 'vue';

onUpdated(() => {
  // 在组件更新完成后执行的逻辑
});

5.onBeforeUnmount：在卸载之前调用，组件即将被销毁。

import { onBeforeUnmount } from 'vue';

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

6.onUnmounted：在卸载之后调用，组件已经被销毁。

import { onUnmounted } from 'vue';

onUnmounted(() => {
  // 在组件卸载完成后执行的逻辑
});

这些生命周期函数可以在组合式 API 的 setup 函数中使用，并且可以在需要时进行逻辑编写。通过使用这些生命周期函数，可以更好地控制和管理组件的生命周期行为，从而实现更灵活、清晰的组件逻辑。