Vue的生命周期

🌟 Vue2 vs Vue3 组件生命周期对比表 🌟

今天给大家整理了一份超详细的 Vue2 和 Vue3 组件生命周期对比表格，还包含了父子组件生命周期执行顺序的知识点！👀
无论是面试还是实战，这些知识点都是必备的哦！💪

---

📊 Vue2 和 Vue3 生命周期对比表

生命周期钩子	Vue2	Vue3	说明
创建阶段	beforeCreate	无（被 setup替代）	Vue3 中 setup替代了 beforeCreate和 created，逻辑更集中！
	created	无（被 setup替代）
挂载阶段	beforeMount	onBeforeMount	模板编译完成，但还没挂载到 DOM 上。
	mounted	onMounted	组件挂载到 DOM 上，可以操作 DOM 啦！🎉
更新阶段	beforeUpdate	onBeforeUpdate	数据更新时触发，但 DOM 还没重新渲染。
	updated	onUpdated	数据更新完成，DOM 也重新渲染了。
销毁阶段	beforeDestroy	onBeforeUnmount	组件销毁前触发，这时候还能访问实例哦！
	destroyed	onUnmounted	组件销毁完成，所有的事件监听和子实例都被移除啦！
新增钩子	无	setup	Vue3 新增的钩子，在 beforeCreate之前执行，用于定义响应式数据和方法。

---

👨‍👦 父子组件生命周期执行流程图

父组件 beforeCreate
       ↓
父组件 created
       ↓
父组件 beforeMount
       ↓
子组件 beforeCreate
       ↓
子组件 created
       ↓
子组件 beforeMount
       ↓
子组件 mounted
       ↓
父组件 mounted

更新阶段：

父组件 beforeUpdate
       ↓
子组件 beforeUpdate
       ↓
子组件 updated
       ↓
父组件 updated

销毁阶段：

父组件 beforeDestroy / onBeforeUnmount
       ↓
子组件 beforeDestroy / onBeforeUnmount
       ↓
子组件 destroyed / onUnmounted
       ↓
父组件 destroyed / onUnmounted

---

💡 流程说明

1. 创建阶段：

• • 父组件先初始化，然后子组件初始化。
  • 父组件的 beforeCreate 和 created 先执行，接着是子组件的 beforeCreate 和 created。

2. 挂载阶段：

• • 父组件的 beforeMount 先执行，然后子组件的 beforeMount 和 mounted 执行。
  • 最后父组件的 mounted 执行，表示整个组件树挂载完成。

3. 更新阶段：

• • 父组件的 beforeUpdate 先触发，然后子组件的 beforeUpdate 和 updated 执行。
  • 最后父组件的 updated 执行，表示整个组件树更新完成。

4. 销毁阶段：

• • 父组件的 beforeDestroy / onBeforeUnmount 先触发，然后子组件的 beforeDestroy / onBeforeUnmount 和 destroyed / onUnmounted 执行。

  • 最后父组件的 destroyed / onUnmounted 执行，表示整个组件树销毁完成。

💡 总结

• Vue2：经典的选项式 API，生命周期钩子直接写在 options 里。
• Vue3：支持 Composition API，生命周期钩子更灵活，命名也更规范！
• 父子组件顺序：父组件先创建，子组件先挂载；父组件先更新，子组件先销毁。

掌握这些知识点，Vue 开发再也不怕面试题啦！🚀

---