浙江台州网络设计网站,北京高端网站公司哪家好,joomla做的网站,贵南县网站建设公司用最直白的对比帮你理解 Vue2 和 Vue3 生命周期的区别#xff0c;就像对比手机系统的升级#xff1a; 一、生命周期阶段对比表#xff08;老手机 vs 新手机#xff09;
阶段Vue2#xff08;老系统#xff09;Vue3#xff08;新系统#xff09;变化说明初始化beforeCre…用最直白的对比帮你理解 Vue2 和 Vue3 生命周期的区别就像对比手机系统的升级 一、生命周期阶段对比表老手机 vs 新手机
阶段Vue2老系统Vue3新系统变化说明初始化beforeCreate无直接写 setup 里像开机时的初始化设置现在更简洁创建完成created无直接写 setup 里挂载前beforeMountonBeforeMount名字加 on更直观挂载完成mountedonMounted更新前beforeUpdateonBeforeUpdate更新后updatedonUpdated销毁前beforeDestroyonBeforeUnmount改名更贴切拆零件 vs 卸载销毁后destroyedonUnmounted 二、最明显的 3 个变化
1. 两个钩子被合并了像手机功能整合
Vue2 的 beforeCreate 和 createdVue3 直接用 setup() 函数替代代码对比// Vue2
export default {created() {console.log(组件出生了);}
}// Vue3
export default {setup() {console.log(组件出生了); // 直接写这里}
}2. 销毁阶段改名了更像拆房子
beforeDestroy → onBeforeUnmountdestroyed → onUnmounted改名原因更符合实际行为卸载组件而不是销毁
3. 新增调试钩子像手机开发者模式
onRenderTracked追踪谁触发了更新onRenderTriggered追踪数据变化使用场景调试复杂数据流时超有用 三、执行顺序就像组装乐高
父子组件挂载顺序不变
父 setup → 父挂载前 → 子 setup → 子挂载前 → 子挂载完成 → 父挂载完成四、组合式 API 的写法像积木自由拼装
Vue3 可以按需引入生命周期不再强制写在固定位置
import { onMounted, onUnmounted } from vue;export default {setup() {// 初始化代码相当于 createdconsole.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 就像更智能的手机系统
更简洁合并了初始化阶段更直观钩子名字更贴切比如 unmount更灵活组合式 API 让代码像搭积木一样自由更强大新增调试工具钩子
一句话Vue3 生命周期本质没变只是写法更现代化就像手机系统升级后操作更顺手了 ✨
