前言本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。

vue3生命周期

Vue 3 的生命周期钩子（Lifecycle Hooks）在组件实例的不同阶段提供了灵活的控制点，开发者可以在这些钩子函数中执行相应的逻辑，如初始化数据、订阅事件、清理资源等。相比于 Vue 2，Vue 3 的生命周期函数名称做了一些修改，以更好地适应组合式 API（Composition API）

Vue 3 常见的生命周期钩子onBeforeMount - 在组件挂载之前调用。

import { onBeforeMount } from 'vue';
onBeforeMount(() => {
console.log('组件即将挂载');
});

onMounted - 在组件挂载到 DOM 后调用。

import { onMounted } from 'vue';
onMounted(() => {
console.log('组件已挂载');
});

onBeforeUpdate - 在组件的响应式状态更新并重新渲染之前调用。

import { onBeforeUpdate } from 'vue';
onBeforeUpdate(() => {
console.log('组件即将更新');
});

onUpdated - 在组件的 DOM 更新后调用。

import { onUpdated } from 'vue';
onUpdated(() => {
console.log('组件已更新');
});

onBeforeUnmount - 在组件卸载之前调用。

import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
console.log('组件即将卸载');
});

onUnmounted - 在组件卸载之后调用。

import { onUnmounted } from 'vue';
onUnmounted(() => {
console.log('组件已卸载');
});

这个时候就有小伙伴来问了，诶你怎么把beforeCreate 和 created漏掉了呢，这里呢作者不是漏掉了，而是单独拿出来解释一下。

Vue 3 中的 beforeCreate 和 created

如果你依旧使用选项式 API（Options API），那么 beforeCreate 和 created 依然存在，可以继续使用。

export default {
  beforeCreate() {
    console.log('beforeCreate: 组件实例尚未初始化');
  },
};

export default {
  created() {
    console.log('created: 组件实例已创建，响应式数据已初始化');
  },
};

如果你使用组合式 API，setup 函数的调用时机可以视为 beforeCreate 和 created 阶段。在 setup 函数中，开发者可以做所有响应式状态的初始化工作。使用 setup 代替 beforeCreate 和 created

export default {
  setup() {
    console.log('setup: 组件正在创建');
    // 在 setup 中可以进行响应式数据的初始化
    const count = ref(0);
    return { count };
  },
};

这里给大家放一张官方的Vue3生命周期图片，方便大家更好的理解：

注意：vue3父子组件生命周期的执行顺序

假设有一个父组件 Parent 和一个子组件 Child，我们通过 setup 函数或选项式 API 来定义生命周期钩子。以下是父子组件的生命周期钩子执行顺序：

更新时的执行顺序:当父组件的状态更新导致子组件也需要重新渲染时，钩子的执行顺序如下：

卸载时的执行顺序当父组件或子组件被销毁时，钩子执行顺序如下：

父组件 onBeforeUnmount子组件 onBeforeUnmount子组件 onUnmounted (子组件销毁完成)父组件 onUnmounted (父组件销毁完成)

父子组件的生命周期钩子执行顺序是由外到内，再由内到外。在挂载时，父组件的 beforeCreate 和 created 先执行，然后子组件的 beforeCreate 和 created 再执行，子组件挂载后，父组件才完成挂载。同样在更新和销毁时，父组件的钩子会在子组件钩子之前触发。这种设计保证了父组件在子组件的生命周期中拥有控制权

总结：在 Vue 3 中，生命周期钩子提供了丰富的控制组件生命周期的手段，使得开发者可以在不同的阶段执行相应的逻辑操作。从组件的创建、挂载、更新到销毁，Vue 3 的生命周期函数贯穿整个组件的生命周期。组合式 API 中通过 setup 函数的引入，简化了早期生命周期钩子的使用，如 beforeCreate 和 created，让逻辑更加集中与清晰。ps:以上内容仅为本人对 vue3生命周期的个人理解，如有不足之处，欢迎大家指正与交流，共同进步。