当前位置：首页 > news >正文

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

news 2025/8/26 5:27:18

用最直白的对比帮你理解 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(); // 卸载时停止});}
}