本文完整梳理 Vue2 Options API、Vue3 Options API、Vue3 Composition APIsetup生命周期钩子采用多维度表格对比区分兼容差异、执行时机、使用场景、注意事项同时讲解变更逻辑、废弃 API、替代方案适用于项目迁移、面试复习、架构选型参考。前置基础概念生命周期组件从创建、挂载、更新到销毁的完整流程框架框架内置回调钩子允许开发者在特定阶段执行自定义逻辑。版本边界说明Vue2Options API唯一标准Vue3 两套写法Options API最大程度兼容 Vue2保留旧钩子名称存在别名调整Composition APIscript setup全新函数式钩子无this推荐新项目使用重要变化Vue3 引入创建阶段重构移除beforeCreate / created对应组合式钩子统一使用setup销毁类钩子重命名。一、生命周期总流程时序对比表表 1完整生命周期执行顺序全景Vue2 Options vs Vue3 Options vs Vue3 Composition阶段Vue2 Options APIVue3 Options APIVue3 Composition APIscript setup核心执行时机说明创建阶段beforeCreatebeforeCreatesetup执行早于所有钩子实例初始化观测数据、事件配置DOM 尚未生成无法访问$elcreatedcreatedsetup实例创建完成数据响应式就绪仍未挂载 DOM无真实 DOM 节点挂载阶段beforeMountbeforeMountonBeforeMountDOM 挂载开始模板编译完成虚拟 DOM 就绪页面未渲染到浏览器mountedmountedonMountedDOM 挂载完成可操作真实 DOM、访问$el适合发起初始请求、DOM 操作更新阶段beforeUpdatebeforeUpdateonBeforeUpdate响应式数据发生变化虚拟 DOM 开始重新渲染旧 DOM 还未更新updatedupdatedonUpdatedDOM 更新完成可获取最新 DOM⚠️禁止直接修改会触发更新的响应式数据销毁阶段beforeDestroybeforeUnmountonBeforeUnmount组件销毁启动实例仍然可用定时器、事件监听建议在此清除destroyedunmountedonUnmounted组件实例销毁DOM 移除响应式监听、子实例全部解除绑定缓存组件专属activatedactivatedonActivatedkeep-alive缓存组件被激活进入页面时触发deactivateddeactivatedonDeactivatedkeep-alive缓存组件切走失活时触发错误捕获errorCapturederrorCapturedonErrorCaptured捕获后代组件抛出的错误⚠️关键时序结论 Vue3setup早于 beforeCreate、created在组合式 API 中不存在单独的onBeforeCreate/onCreated钩子逻辑全部写在setup内部。二、钩子名称变更对照表迁移重点表 2销毁钩子重命名变更Vue2 → Vue3 破坏性变更Vue2 旧名称Vue3 Options API 名称Vue3 Composition API 钩子变更原因beforeDestroybeforeUnmountonBeforeUnmount语义统一不再叫 “销毁实例”强调DOM 卸载服务端渲染概念对齐destroyedunmountedonUnmounted同上注意Vue3 Options API不再兼容beforeDestroy / destroyed直接使用新名称写旧名不会执行三、Options API 与 Composition API 钩子一一映射表表 3钩子一对一映射清单开发迁移查询Vue3 Options APIVue3 Composition API 导入钩子函数beforeCreate无对应钩子逻辑写在 setup 顶层created无对应钩子逻辑写在 setup 顶层beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountedactivatedonActivateddeactivatedonDeactivatederrorCapturedonErrorCapturedrenderTrackedonRenderTracked调试renderTriggeredonRenderTriggered调试补充Vue3 新增两个调试专用钩子Vue2 不存在onRenderTracked追踪响应式依赖收集onRenderTriggered追踪触发重新渲染的数据仅用于调试。四、关键能力限制对比表开发避坑核心表 4各阶段钩子可用能力对比钩子是否可访问响应式 data是否可访问 DOM/$el是否存在 this适合业务场景beforeCreateVue2/Vue3 Options❌ data 未初始化❌✅ this 存在但无法读取 data极少使用createdVue2/Vue3 Options✅❌✅发起接口请求、初始化数据无 DOM 操作setupComposition✅ref/reactive❌❌ 禁止使用 this变量定义、创建监听、基础初始化beforeMount✅❌✅极少使用几乎可以被 created 替代mounted / onMounted✅✅✅(Options) / ❌(Composition)DOM 操作、第三方实例初始化echarts/map、首次请求beforeUpdate✅✅旧 DOM✅获取更新前 DOM 状态很少使用updated✅✅最新 DOM✅基于更新后 DOM 操作避免修改响应式数据防止无限循环beforeUnmount / onBeforeUnmount✅✅DOM 还未删除✅清除定时器、移除全局事件、销毁第三方实例最重要清理钩子unmounted / onUnmounted✅❌ DOM 已移除✅兜底清理不推荐作为主要清理位置activated✅✅✅keep-alive 进入页面刷新数据、重启轮询deactivated✅✅✅keep-alive 离开页面暂停轮询、保存页面临时状态五、代码示例对照表格表 5同一份业务逻辑三种写法代码对照场景组件挂载请求接口组件销毁清除定时器!-- Vue2 Options API -- script export default { data(){ return { timer:null } }, mounted(){ this.fetchData(); this.timer setInterval((){},1000) }, beforeDestroy(){ clearInterval(this.timer) } } /script!-- Vue3 Options API -- script export default { data(){ return { timer:null } }, mounted(){ this.fetchData(); this.timer setInterval((){},1000) }, beforeUnmount(){ clearInterval(this.timer) } } /script!-- Vue3 script setup Composition API -- script setup import {onMounted,onBeforeUnmount} from vue let timer null const fetchData (){} onMounted((){ fetchData() timer setInterval((){},1000) }) onBeforeUnmount(() clearInterval(timer)) /script六、高频易踩坑问题汇总表表 6生命周期经典坑点对比问题场景Vue2 表现Vue3 表现解决方案在 created 操作 DOM❌ 获取不到 $el❌ 获取不到 $elDOM 操作统一移入 mounted /onMountedkeep-alive 组件离开触发销毁钩子❌ 不会执行 beforeDestroy/destroyed❌ 不会执行 beforeUnmount/unmounted使用 activated、deactivated 管理轮询在 updated 内修改响应式变量极易无限更新循环极易无限更新循环增加判断条件尽量不在更新钩子修改数据Vue2 beforeDestroy 直接迁移 Vue3不执行钩子名称失效钩子不触发无报错静默失败替换为 beforeUnmountComposition 中尝试使用 onCreatedAPI 不存在控制台警告无该函数初始化逻辑直接写在 setup 顶层异步组件生命周期时序延迟执行 mounted逻辑一致异步加载完成才触发挂载无需修改七、服务端渲染 SSR 环境差异补充SSR 环境mounted、onMounted 仅在客户端执行服务端渲染阶段不会触发created、setup 在服务端、客户端都会执行因此所有 DOM 相关、浏览器 APIwindow/document代码必须放在 mounted 系列钩子防止 SSR 报错。八、核心总结8.1、最大变更点1、Vue3 销毁钩子改名beforeDestroy → beforeUnmountdestroyed → unmounted2、Composition API 取消独立 created/beforeCreate全部合并到 setup8.2、写法选型建议1、老项目 Vue2 迁移 Vue3Options API 优先修改钩子名称2、新项目 Vue3统一使用script setup Composition 生命周期钩子8.3、开发规范1、数据请求无 DOM 依赖 → created/setup依赖 DOM → mounted2、资源清理统一放置beforeUnmount / onBeforeUnmount3、keep-alive 缓存组件使用 activated/deactivated 管理轮询与页面状态如果你需要我可以把整篇文章整理成适合直接发布到 CSDN 的完整排版版本增加标题层级、Markdown 优化、可直接复制发布。
（支持资料、图片参考_相关定制）_)
