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() {
    // 在组件实例创建之前调用
    console.log('beforeCreate');

    // 组件实例创建完成后调用
    console.log('created');

    // DOM 渲染前调用
    onBeforeMount(() => {
      console.log('beforeMount');
    });

    // DOM 渲染后调用
    onMounted(() => {
      console.log('mounted');
    });

    // 数据更新前调用
    onBeforeUpdate(() => {
      console.log('beforeUpdate');
    });

    // 数据更新后调用
    onUpdated(() => {
      console.log('updated');
    });

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

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

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

解释说明：

• beforeCreate 和 created：在 setup 函数中，Vue 3 的组合式 API 不再有显式的 beforeCreate 和 created 钩子。这些生命周期阶段的行为可以在 setup 函数中通过初始化逻辑来实现。
• onBeforeMount：在挂载开始之前被调用，即在 beforeMount 钩子时调用。
• onMounted：在挂载完成之后被调用，即在 mounted 钩子时调用。
• onBeforeUpdate：在更新之前被调用，即在 beforeUpdate 钩子时调用。
• onUpdated：在更新完成之后被调用，即在 updated 钩子时调用。
• onBeforeUnmount：在卸载组件实例之前被调用，即在 beforeUnmount 钩子时调用。
• onUnmounted：在卸载组件实例之后被调用，即在 unmounted 钩子时调用。

这些生命周期钩子可以帮助你在不同的阶段执行特定的逻辑，确保组件按预期工作。