Vue 2 和 Vue 3 中的生命周期函数列表，以通俗易懂的方式说明每个阶段的作用。

下面是 Vue 2 和 Vue 3 中的生命周期函数列表，以通俗易懂的方式说明每个阶段的作用。

---

✅ Vue 2 的生命周期函数（按执行顺序）

生命周期钩子	说明
beforeCreate	实例刚被创建，数据和方法还未初始化，不能访问 data、methods 等。
created	实例已经创建完成，数据和方法已初始化，可以访问 data、methods，但 DOM 还未渲染。
beforeMount	模板编译/挂载之前，此时页面上还看不到数据。
mounted	模板已经挂载完成，真实 DOM 已生成，可以操作 DOM。
beforeUpdate	数据更新前调用，此时 DOM 还没更新。
updated	数据更新完成后 DOM 也更新了，可以在这里执行依赖于 DOM 的操作。
beforeDestroy	实例销毁前调用，实例仍然可用，通常用于清理事件或定时器。
destroyed	实例已被销毁，所有绑定和子组件也被移除。

---

✅ Vue 3 的生命周期函数（组合式 API <script setup>）

在 Vue 3 的 <script setup> 语法中，使用的是 Composition API 形式，生命周期函数需要从 vue 中导入。

生命周期钩子	Composition API 写法	说明
beforeCreate → ❌ 已废弃	无对应	Vue 3 中不再需要
created → ❌ 已废弃	无对应	Vue 3 中直接在 setup 中写初始化逻辑即可
beforeMount	onBeforeMount()	挂载前，DOM 还未生成
mounted	onMounted()	挂载完成，可以操作 DOM
beforeUpdate	onBeforeUpdate()	数据更新前，DOM 还未更新
updated	onUpdated()	数据更新完成，DOM 已更新
beforeUnmount	onBeforeUnmount()	组件卸载前，用于清理副作用（如定时器）
unmounted	onUnmounted()	组件已卸载

---

📌 小结

• Vue 2 使用选项式 API（Options API），生命周期函数直接写在 Vue 实例里。
• Vue 3 推荐使用 <script setup> + Composition API，生命周期通过 onXXX() 函数引入使用。
• Vue 3 去掉了 beforeCreate 和 created，因为 setup() 函数本身就能替代它们的功能。

如果你有具体场景，比如“我要在页面加载后请求数据”，你可以选择 mounted（Vue 2）或 onMounted()（Vue 3）。