Vue2 与 Vue3 核心差异全总结
本文整合所有讨论内容，从生命周期、computed/methods、响应式原理、API 设计、全局 API、组件特性、性能等核心维度，全面梳理 Vue2 与 Vue3 的差异，明确二者的兼容特性与使用一致性。
一、 生命周期钩子差异
| 对比维度 | Vue2（选项式 API） | Vue3（组合式 API/选项式 API） |
|---|---|---|
| 核心钩子命名 | 无on前缀：mounted、beforeDestroy、destroyed等 | 组合式 API 带on前缀（onMounted/onUnmounted等）；选项式 API 兼容 Vue2 命名（mounted/beforeUnmount/unmounted） |
| 特有 API | 无onXXX系列钩子 | onMounted/onUnmounted/onBeforeMount等（组合式 API 特有） |
| 导入要求 | 无需导入，直接在组件配置中声明 | 组合式 API 需手动从vue导入；选项式 API 无需导入 |
| 调用形式 | 对象属性形式声明（一个钩子仅能声明一次，多次声明会覆盖） | 组合式 API 以函数回调形式调用，支持多个同名钩子按声明顺序执行；选项式 API 与 Vue2 一致 |
| 实例访问 | 通过this访问组件数据/方法 | 组合式 API 无需this，直接访问顶层响应式数据；选项式 API 与 Vue2 一致 |
| 等价关系 | mounted→ Vue3onMounted；beforeDestroy→ Vue3onBeforeUnmount；destroyed→ Vue3onUnmounted | 核心执行时机、作用与 Vue2 完全一致，仅命名/使用形式差异 |
| 特殊说明 | beforeCreate/created为独立钩子 | 组合式 API 中无对应钩子，直接用<script setup>顶层代码替代；选项式 API 保留这两个钩子 |
二、 computed（计算属性）与 methods（方法）差异
二者核心功能、使用场景、核心区别（缓存/触发方式）在 Vue2 和 Vue3 中完全一致，仅声明语法有差异：
| 对比维度 | Vue2（选项式 API） | Vue3（组合式 API/选项式 API） |
|---|---|---|
| 声明方式 | computed/methods作为组件配置对象属性，内部定义函数 | 1. 选项式 API：与 Vue2 完全一致； 2. 组合式 API： computed需导入后以函数形式创建，methods直接声明为顶层普通函数（无需包裹在methods对象中） |
| 响应式访问 | 通过this访问（如this.firstName） | 1. 选项式 API：与 Vue2 一致； 2. 组合式 API：直接访问 ref/reactive 变量（ref 需 .value访问） |
| 增强功能 | 支持可写计算属性（配置get/set），语法繁琐 | 组合式 API 可写计算属性语法更简洁清晰；核心功能与 Vue2 一致 |
| 核心一致性 | 1.computed：有缓存（依赖响应式数据变化才重新计算），被动触发，模板使用无需加()，只读模式不支持传参；2. methods：无缓存（每次调用重新执行），主动触发，模板使用需加()，支持自由传参；3. 场景： computed用于复杂数据推导（需缓存），methods用于交互逻辑/一次性业务处理 | |
| 兼容性 | - | 完全兼容 Vue2 的computed/methods用法，老项目可平滑迁移 |
三、 响应式原理：根本性重构（核心差异）
这是 Vue2 与 Vue3 底层实现的本质区别，直接决定响应式能力与性能：
| 对比维度 | Vue2 | Vue3 |
|---|---|---|
| 核心 API | Object.defineProperty | Proxy+Reflect |
| 核心缺陷 | 1. 无法监听对象新增/删除属性（需Vue.set/this.$set）；2. 无法监听数组下标修改/长度修改（需用变异方法如 push/splice）；3. 深度响应式一次性递归到底，初始化性能差 | 1. 天然支持对象新增/删除属性、数组下标/长度修改，无需额外 API； 2. 惰性递归：仅访问深层属性时才做响应式处理，初始化性能大幅提升； 3. 支持拦截更多操作（ in运算符、delete关键字等），功能更强 |
| 使用形式 | 仅支持data选项定义响应式数据 | 支持ref（基本类型/复杂类型）、reactive（复杂类型）创建响应式数据，灵活性更高 |
| 性能表现 | 复杂对象初始化性能较差 | 初始化性能、更新性能均优于 Vue2 |
四、 API 设计：选项式 API vs 组合式 API
这是开发模式的核心差异，决定组件代码组织方式与可维护性：
| 对比维度 | Vue2（主推选项式 API） | Vue3（主推组合式 API，兼容选项式 API） |
|---|---|---|
| 代码组织方式 | 按「选项类型」划分（data/methods/computed等），同一业务逻辑代码分散 | 按「业务逻辑」聚合，同一逻辑的响应式数据、方法、监听、生命周期集中编写，更易维护 |
| 逻辑复用 | 依赖mixin，存在命名冲突、逻辑溯源困难等问题 | 依赖「组合式函数（Composables）」，无命名冲突，溯源清晰，复用性更强 |
| TypeScript 支持 | 类型推导不友好，需大量手动类型注解 | 天生支持 TypeScript，类型推导更精准，开发体验更好 |
| 语法简洁性 | 语法固定，入门简单，但冗余代码较多 | 支持<script setup>语法糖，代码更简洁，冗余更少 |
| 适用场景 | 小型组件、新手入门、简单项目 | 复杂组件、中大型项目、需要逻辑复用的场景 |
| 兼容性 | - | 完全兼容选项式 API，Vue2 项目可平滑迁移并保留原有写法 |
五、 全局 API：从「全局挂载」到「实例化隔离」
| 对比维度 | Vue2 | Vue3 |
|---|---|---|
| 核心创建方式 | 直接使用Vue构造函数，全局 API 挂载在Vue上 | 通过createApp创建独立应用实例，API 挂载在实例上 |
| 全局配置特性 | 所有 Vue 实例共享全局配置，易产生冲突 | 不同应用实例相互隔离，全局配置仅对当前实例生效，无冲突 |
| 核心 API 示例 | Vue.component、Vue.directive、Vue.use、Vue.filter | app.component、app.directive、app.use（移除Vue.filter） |
| 隔离性 | 无应用实例隔离，不利于多实例/服务端渲染 | 应用实例隔离性好，支持多实例独立配置，适配服务端渲染 |
六、 其他重要差异（组件/指令/性能等）
| 特性/功能 | Vue2 | Vue3 |
|---|---|---|
| 过滤器（Filter） | 支持filters选项，模板中通过 ` | ` 使用 |
| Teleport 组件 | 无原生支持，需手动操作 DOM 实现组件 DOM 迁移 | 新增<Teleport>组件，轻松传送组件 DOM 至指定节点，保留响应式与组件通信 |
| Suspense 组件 | 无原生支持，需手动维护异步组件加载状态 | 新增<Suspense>组件，统一处理异步组件加载中/失败状态 |
| v-model 指令 | 1. 组件默认绑定value+input事件；2. 多双向绑定需用 .sync；3. 自定义需配置 model选项 | 1. 支持组件多v-model绑定（如v-model:name）；2. 移除 .sync，功能整合至v-model；3. 自定义无需 model选项，语法更简洁 |
| 性能优化 | 编译器无特殊优化，打包体积较大 | 1. 编译器优化：静态提升、PatchFlags（精准 DOM 对比）、缓存事件函数； 2. Tree-Shaking 优化：按需打包，体积更小； 3. 整体渲染性能大幅提升 |
七、 核心总结
- 兼容优先：Vue3 完全兼容 Vue2 的选项式 API，老项目可平滑迁移，
computed/methods/生命周期的核心作用保持一致，仅语法形式有差异； - 底层升级：响应式原理从
Object.defineProperty升级为Proxy+Reflect，解决 Vue2 响应式缺陷，性能与功能大幅提升； - 开发模式升级：从选项式 API 主推升级为组合式 API 主推，解决复杂组件逻辑碎片化问题，提升逻辑复用性与 TypeScript 支持；
- API 规范化：全局 API 从全局挂载改为实例化隔离，避免配置冲突；重构 v-model、移除过滤器，语法更简洁统一；
- 性能与功能增强：新增 Teleport/Suspense 组件，编译器+Tree-Shaking 双重优化，体积更小、性能更优；
- 核心差异聚焦：生命周期（onXXX 钩子）、computed/methods（声明语法）、响应式原理、API 设计、全局 API 是二者最核心的差异点，其余差异均为功能增强或语法优化。
