vue2和vue3生命周期的区别通俗易懂

用最直白的对比帮你理解 Vue2 和 Vue3 生命周期的区别，就像对比手机系统的升级：

---

一、生命周期阶段对比表（老手机 vs 新手机）

阶段	Vue2（老系统）	Vue3（新系统）	变化说明
初始化	beforeCreate	无（直接写 setup 里）	像开机时的初始化设置，现在更简洁
创建完成	created	无（直接写 setup 里）
挂载前	beforeMount	onBeforeMount	名字加 on，更直观
挂载完成	mounted	onMounted
更新前	beforeUpdate	onBeforeUpdate
更新后	updated	onUpdated
销毁前	beforeDestroy	onBeforeUnmount	改名！更贴切（拆零件 vs 卸载）
销毁后	destroyed	onUnmounted

---

二、最明显的 3 个变化

1. 两个钩子被合并了（像手机功能整合）

• Vue2 的 beforeCreate 和 created
• Vue3 直接用 setup() 函数替代
• 代码对比：

  // Vue2
  export default {created() {console.log('组件出生了！');}
  }// Vue3
  export default {setup() {console.log('组件出生了！'); // 直接写这里}
  }
  

2. 销毁阶段改名了（更像拆房子）

• beforeDestroy → onBeforeUnmount
• destroyed → onUnmounted
• 改名原因：更符合实际行为（卸载组件，而不是销毁）

3. 新增调试钩子（像手机开发者模式）

• onRenderTracked（追踪谁触发了更新）
• onRenderTriggered（追踪数据变化）
• 使用场景：调试复杂数据流时超有用！

---

三、执行顺序（就像组装乐高）

父子组件挂载顺序不变：

父 setup → 父挂载前 → 子 setup → 子挂载前 → 子挂载完成 → 父挂载完成

---

四、组合式 API 的写法（像积木自由拼装）

Vue3 可以按需引入生命周期，不再强制写在固定位置：

import { onMounted, onUnmounted } from 'vue';export default {setup() {// 初始化代码（相当于 created）console.log('组件出生了！');onMounted(() => {console.log('挂载完成！');});onUnmounted(() => {console.log('组件被拆了！');});}
}

---

🌰 举个栗子：播放音乐组件

Vue2 写法：

export default {mounted() {this.playMusic(); // 挂载后播放},beforeDestroy() {this.stopMusic(); // 销毁前停止}
}

Vue3 写法：

import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {playMusic(); // 挂载后播放});onUnmounted(() => {stopMusic(); // 卸载时停止});}
}

---

总结：Vue3 就像更智能的手机系统

1. 更简洁：合并了初始化阶段
2. 更直观：钩子名字更贴切（比如 unmount）
3. 更灵活：组合式 API 让代码像搭积木一样自由
4. 更强大：新增调试工具钩子

一句话：Vue3 生命周期本质没变，只是写法更现代化，就像手机系统升级后操作更顺手了！ 📱✨