前言 本系列将从零开始，系统性地介绍 Vue 3 的常用 API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握 Vue 3 的基础与进阶知识，最终具备独立搭建完整 Vue 3 项目的能力。
vue3生命周期
Vue 3 的生命周期钩子（Lifecycle Hooks）在组件实例的不同阶段提供了灵活的控制点，开发者可以在这些钩子函数中执行相应的逻辑，如初始化数据、订阅事件、清理资源等。相比于 Vue 2，Vue 3 的生命周期函数名称做了一些修改，以更好地适应组合式 API（Composition API）
Vue 3 常见的生命周期钩子
- onBeforeMount - 在组件挂载之前调用。
cpp
import { onBeforeMount } from 'vue';
onBeforeMount(() => {
console.log('组件即将挂载');
});- onMounted - 在组件挂载到 DOM 后调用。
cpp
import { onMounted } from 'vue';
onMounted(() => {
console.log('组件已挂载');
});- onBeforeUpdate - 在组件的响应式状态更新并重新渲染之前调用。
cpp
import { onBeforeUpdate } from 'vue';
onBeforeUpdate(() => {
console.log('组件即将更新');
});- onUpdated - 在组件的 DOM 更新后调用。
cpp
import { onUpdated } from 'vue';
onUpdated(() => {
console.log('组件已更新');
});- onBeforeUnmount - 在组件卸载之前调用。
cpp
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
console.log('组件即将卸载');
});- onUnmounted - 在组件卸载之后调用。
cpp
import { onUnmounted } from 'vue';
onUnmounted(() => {
console.log('组件已卸载');
});这个时候就有小伙伴来问了，诶你怎么把beforeCreate 和 created漏掉了呢，这里呢作者不是漏掉了，而是单独拿出来解释一下。
Vue 3 中的 beforeCreate 和 created
如果你依旧使用选项式 API（Options API），那么 beforeCreate 和 created 依然存在，可以继续使用。
- beforeCreate - 在组件实例被创建之前调用。此时组件的实例还没有被完全初始化，响应式数据和事件监听器还没有被设置。
cpp
export default {
beforeCreate() {
console.log('beforeCreate: 组件实例尚未初始化');
},
};- created - 在组件实例创建完成后调用，但此时尚未挂载到 DOM 上。响应式数据已经设置完毕，实例上的 data、methods、computed 等属性都可以访问。
cpp
export default {
created() {
console.log('created: 组件实例已创建，响应式数据已初始化');
},
};如果你使用组合式 API，setup 函数的调用时机可以视为 beforeCreate 和 created 阶段。在 setup 函数中，开发者可以做所有响应式状态的初始化工作。 使用 setup 代替 beforeCreate 和 created
cpp
export default {
setup() {
console.log('setup: 组件正在创建');
// 在 setup 中可以进行响应式数据的初始化
const count = ref(0);
return { count };
},
};这里给大家放一张官方的Vue3生命周期图片，方便大家更好的理解：
注意：vue3父子组件生命周期的执行顺序
假设有一个父组件 Parent 和一个子组件 Child，我们通过 setup 函数或选项式 API 来定义生命周期钩子。以下是父子组件的生命周期钩子执行顺序：
- 父组件 beforeCreate
- 父组件 created
- 父组件 onBeforeMount
- 子组件 beforeCreate
- 子组件created
- 子组件 onBeforeMount
- 子组件 onMounted (子组件挂载完成)
- 父组件 onMounted(父组件挂载完成)
更新时的执行顺序: 当父组件的状态更新导致子组件也需要重新渲染时，钩子的执行顺序如下：
- 父组件 onBeforeUpdate
- 子组件onBeforeUpdate
- 子组件 onUpdated (子组件更新完成)
- 父组件onUpdated (父组件更新完成)
卸载时的执行顺序 当父组件或子组件被销毁时，钩子执行顺序如下：
- 父组件 onBeforeUnmount
- 子组件 onBeforeUnmount
- 子组件 onUnmounted (子组件销毁完成)
- 父组件 onUnmounted (父组件销毁完成)
父子组件的生命周期钩子执行顺序是由外到内，再由内到外。在挂载时，父组件的 beforeCreate 和 created 先执行，然后子组件的 beforeCreate 和 created 再执行，子组件挂载后，父组件才完成挂载。同样在更新和销毁时，父组件的钩子会在子组件钩子之前触发。这种设计保证了父组件在子组件的生命周期中拥有控制权