Vue2和Vue3生命周期对比1. 核心变化概览2. 详细差异解析2.1 初始化阶段setup 取代 beforeCreate 和 created2.2 卸载阶段命名语义化优化2.3 组合式 API 中的写法变化3. 重要注意事项与最佳实践3.1. 同步注册原则3.2. this 指向问题3.3. Keep-Alive 缓存组件3.4. 迁移建议Vue 2 和 Vue 3 的生命周期在核心逻辑上保持高度一致都涵盖了组件从 创建、挂载、更新到卸载销毁**的全过程。两者的主要区别体现在初始化阶段的合并、销毁阶段命名的语义化调整以及组合式 APIComposition API下的调用方式。1. 核心变化概览阶段Vue 2 (选项式 API)Vue 3 (选项式 API)Vue 3 (组合式 API)说明创建beforeCreatecreated被setup()替代被setup()替代Vue 3 中setup在beforeCreate之前执行统一承载初始化逻辑。挂载beforeMountmountedbeforeMountmountedonBeforeMountonMounted命名不变组合式需加on前缀并导入。更新beforeUpdateupdatedbeforeUpdateupdatedonBeforeUpdateonUpdated命名不变组合式需加on前缀并导入。卸载beforeDestroydestroyedbeforeUnmountunmountedonBeforeUnmountonUnmounted重命名用 “Unmount”卸载替代 “Destroy”销毁语义更准确。缓存activateddeactivatedactivateddeactivatedonActivatedonDeactivated仅在使用keep-alive时触发。错误errorCapturederrorCapturedonErrorCaptured捕获子孙组件错误。2. 详细差异解析2.1 初始化阶段setup取代beforeCreate和created这是 Vue 3 生命周期最大的变化。Vue 2需要分别在beforeCreate实例创建前无法访问 data/props和created实例创建后可访问 data/props但无 DOM中处理初始化逻辑。Vue 3引入了setup()函数。setup的执行时机早于beforeCreate。在setup中你可以直接定义响应式数据ref,reactive、计算属性和方法。结论Vue 2 中写在beforeCreate和created里的逻辑在 Vue 3 中直接写在setup函数的顶层同步代码中即可。2.2 卸载阶段命名语义化优化Vue 2使用beforeDestroy和destroyed。术语 “Destroy” 容易让人误解为组件实例被彻底删除但实际上组件只是从 DOM 中移除实例可能仍存在于内存中如被缓存。Vue 3重命名为beforeUnmount和unmounted。语义更准确“Unmount” 强调组件从 DOM 树中“卸载”的过程而非彻底销毁实例。功能一致依然用于清理定时器、取消网络请求、解绑全局事件等防止内存泄漏。2.3 组合式 API 中的写法变化在 Vue 3 的组合式 APIscript setup或setup()函数中生命周期钩子不再是组件配置项而是需要手动导入的函数。命名规则所有钩子前加上on前缀如mounted-onMounted。注册方式通过调用这些函数并传入回调来注册逻辑。多次调用同一个生命周期钩子可以在组件中多次调用逻辑会按顺序执行这有助于将相关功能的代码聚合在一起Colocation提高可维护性。代码对比示例// Vue 2 选项式 APIexportdefault{data(){return{count:0}},created(){console.log(Vue2: Created)},mounted(){console.log(Vue2: Mounted)},beforeDestroy(){console.log(Vue2: Before Destroy)}}// Vue 3 组合式 API (script setup)import{ref,onMounted,onBeforeUnmount}fromvueconstcountref(0)// setup 顶层代码等效于 Vue2 的 created/beforeCreateconsole.log(Vue3: Setup (Init))// 显式导入并注册钩子onMounted((){console.log(Vue3: Mounted)})onBeforeUnmount((){console.log(Vue3: Before Unmount)})3. 重要注意事项与最佳实践3.1. 同步注册原则在组合式 API 中生命周期钩子如 onMounted必须在 setup 或 script setup 的同步执行阶段调用。不能在异步回调如 setTimeout、Promise.then或条件语句如 if (flag) { onMounted(...) }中调用否则会导致依赖追踪失效或钩子未正确注册。3.2.this指向问题Vue 2 的生命周期钩子中this指向组件实例。Vue 3 的组合式 API 中没有this。所有状态和方法都通过显式导入和声明变量来访问避免了this指向混乱的问题。3.3. Keep-Alive 缓存组件如果组件被keep-alive包裹切换时不会触发unmounted/destroyed而是触发deactivated。重新激活时触发activated。清理逻辑若依赖于组件完全移除需注意区分unmounted和deactivated的场景。3.4. 迁移建议将 Vue 2 的beforeCreate和created逻辑直接移至setup顶部。将beforeDestroy重命名为onBeforeUnmount并导入使用。其他钩子mounted,updated等只需添加on前缀并导入即可逻辑基本无需改动。