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');
    });

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

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

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

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

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

解释说明：

1. onBeforeMount：在组件挂载之前调用，此时组件的 DOM 尚未生成。
2. onMounted：在组件挂载之后调用，此时组件的 DOM 已经生成，可以操作 DOM。
3. onBeforeUpdate：在组件更新之前调用，此时组件的 DOM 还未更新。
4. onUpdated：在组件更新之后调用，此时组件的 DOM 已经更新。
5. onBeforeUnmount：在组件卸载之前调用，此时组件仍然存在。
6. onUnmounted：在组件卸载之后调用，此时组件已经不存在。

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