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

vue3和vue2生命周期的区别

news 2025/9/10 10:35:25

Vue 3 的生命周期与 Vue 2 相比有以下核心区别，主要体现在 钩子函数命名、组合式 API 和 新增功能 上。以下是详细对比和示例说明：

1. 生命周期钩子名称变化

Vue 3 对部分生命周期钩子进行了重命名，以保持命名一致性（添加 on 前缀），并适配组合式 API：

Vue 2	Vue 3	说明
`beforeCreate`	无（由 `setup` 替代）	`setup` 函数已包含其逻辑
`created`	无（由 `setup` 替代）	`setup` 函数已包含其逻辑
`beforeMount`	`onBeforeMount`	组件挂载前触发
`mounted`	`onMounted`	组件挂载后触发
`beforeUpdate`	`onBeforeUpdate`	数据更新前触发
`updated`	`onUpdated`	数据更新后触发
`beforeDestroy`	`onBeforeUnmount`	组件卸载前触发
`destroyed`	`onUnmounted`	组件卸载后触发
`activated`	`onActivated`	`<keep-alive>` 缓存组件激活时触发
`deactivated`	`onDeactivated`	`<keep-alive>` 缓存组件停用时触发
`errorCaptured`	`onErrorCaptured`	捕获子组件错误时触发

2. 组合式 API 的引入

Vue 3 引入了 组合式 API（Composition API），通过 setup() 函数替代 Vue 2 的 beforeCreate 和 created 钩子。组合式 API 提供了更灵活的代码组织方式，尤其适合逻辑复用。

Vue 2 示例（选项式 API）

export default {data() {return { count: 0 };},created() {console.log('created');},mounted() {console.log('mounted');}
};

Vue 3 示例（组合式 API）

import { ref, onMounted } from 'vue';export default {setup() {const count = ref(0);console.log('setup'); // 替代 Vue 2 的 created/beforeCreateonMounted(() => {console.log('mounted');});return { count };}
};

3. 新增调试钩子

Vue 3 新增了两个调试钩子，用于追踪响应式依赖和渲染触发：

onRenderTracked：当渲染函数追踪到响应式依赖时触发。
onRenderTriggered：当响应式依赖触发重新渲染时触发。

示例

import { onRenderTracked, onRenderTriggered } from 'vue';export default {setup() {onRenderTracked((event) => {console.log('追踪依赖:', event.key); // 打印被追踪的响应式属性});onRenderTriggered((event) => {console.log('触发更新:', event.key); // 打印触发更新的响应式属性});}
};

4. 执行顺序变化（父子组件）

在父子组件的生命周期执行顺序上，Vue 3 与 Vue 2 有差异：

Vue 2 的执行顺序

父 created → 子 created → 子 mounted → 父 mounted

Vue 3 的执行顺序

父 setup → 子 setup → 父 onBeforeMount → 子 onBeforeMount → 子 onMounted → 父 onMounted

5. 异步更新机制优化

Vue 3 的更新阶段采用 异步渲染 机制，优化了性能并减少不必要的重复计算。例如，多次修改响应式数据后，Vue 3 会合并更新，避免频繁触发 DOM 操作。

示例

import { ref, onUpdated } from 'vue';export default {setup() {const count = ref(0);onUpdated(() => {console.log('DOM 更新后触发一次');});// 多次修改 count，只会触发一次 onUpdatedcount.value++;count.value++;}
};

6. 清理副作用（Cleanup）

在 Vue 3 中，onBeforeUnmount 是清理资源（如定时器、事件监听器）的推荐位置。

Vue 2 示例

export default {mounted() {this.timer = setInterval(() => {console.log('定时器运行');}, 1000);},beforeDestroy() {clearInterval(this.timer); // 清理定时器}
};

Vue 3 示例

import { onMounted, onBeforeUnmount } from 'vue';export default {setup() {let timer = null;onMounted(() => {timer = setInterval(() => {console.log('定时器运行');}, 1000);});onBeforeUnmount(() => {clearInterval(timer); // 清理定时器});}
};

7. 完整对比示例

Vue 2 生命周期钩子

export default {data() {return { message: 'Hello Vue 2' };},created() {console.log('created');},mounted() {console.log('mounted');},beforeDestroy() {console.log('beforeDestroy');}
};

Vue 3 生命周期钩子

import { ref, onMounted, onBeforeUnmount } from 'vue';export default {setup() {const message = ref('Hello Vue 3');console.log('setup'); // 替代 created/beforeCreateonMounted(() => {console.log('mounted');});onBeforeUnmount(() => {console.log('onBeforeUnmount'); // 替代 beforeDestroy});return { message };}
};

总结

特性	Vue 2	Vue 3
钩子名称	原始命名（如 `beforeCreate`）	添加 `on` 前缀（如 `onBeforeMount`）
组合式 API	不支持	支持，通过 `setup()` 函数组织逻辑
调试钩子	无	新增 `onRenderTracked`/`onRenderTriggered`
执行顺序	父组件先执行 `created`	父组件先执行 `setup`
清理资源	`beforeDestroy`	`onBeforeUnmount`
异步更新优化	同步更新	异步合并更新