vue3生命周期

// Vue 3 生命周期钩子示例

<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

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

export default defineComponent({
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  },
  setup() {
    // 在组件实例创建完成之后，但在挂载开始之前调用
    onBeforeMount(() => {
      console.log('onBeforeMount');
    });

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

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

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

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

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

    return {};
  }
});
</script>

解释说明：

1. onBeforeMount: 在组件实例创建完成之后，但在挂载开始之前调用。此时模板已经编译完成，但尚未渲染到页面上。
2. onMounted: 在组件挂载完成后调用。此时组件的 DOM 已经被渲染到页面上。
3. onBeforeUpdate: 在组件更新 DOM 之前调用。此时数据已经更新，但 DOM 还未更新。
4. onUpdated: 在组件更新完成后调用。此时 DOM 已经根据最新的数据进行了更新。
5. onBeforeUnmount: 在组件卸载之前调用。此时组件仍然完全可用。
6. onUnmounted: 在组件卸载后调用。此时组件已经被销毁，不再可用。

这些生命周期钩子可以帮助你在不同的阶段执行特定的逻辑，例如初始化、清理资源等。