vue3.0生命周期

// Vue 3.0 生命周期示例代码

<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.0!'
    };
  },
  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：在组件卸载之后调用，组件已经被销毁，无法再访问组件实例。