vue3 组件生命周期

// Vue 3 组件生命周期示例代码

<template>
  <div>
    <p>这是一个展示 Vue 3 组件生命周期的组件</p>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  name: 'LifecycleComponent',
  setup() {
    // 在组件挂载之前调用
    onBeforeMount(() => {
      console.log('onBeforeMount: 组件挂载之前');
    });

    // 在组件挂载之后调用
    onMounted(() => {
      console.log('onMounted: 组件挂载之后');
    });

    // 在组件更新之前调用
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate: 组件更新之前');
    });

    // 在组件更新之后调用
    onUpdated(() => {
      console.log('onUpdated: 组件更新之后');
    });

    // 在组件卸载之前调用
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount: 组件卸载之前');
    });

    // 在组件卸载之后调用
    onUnmounted(() => {
      console.log('onUnmounted: 组件卸载之后');
    });

    return {};
  }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明：

1. onBeforeMount：在组件挂载之前调用，此时组件的 DOM 还未生成。
2. onMounted：在组件挂载之后调用，此时组件的 DOM 已经生成，可以进行 DOM 操作。
3. onBeforeUpdate：在组件更新之前调用，此时组件的数据已经更新，但 DOM 还未更新。
4. onUpdated：在组件更新之后调用，此时组件的 DOM 已经更新。
5. onBeforeUnmount：在组件卸载之前调用，此时组件仍然可见。
6. onUnmounted：在组件卸载之后调用，此时组件已经从 DOM 中移除。

这些生命周期钩子可以帮助你在组件的不同阶段执行特定的操作，比如初始化数据、清理资源等。