Vue2 和 Vue3 都用过，有什么区别？｜蚂蚁集团前端面经解析

60 秒回答模板

Vue2 和 Vue3 最大差异不是语法变了，而是底层响应式、逻辑组织方式和编译运行时能力升级了。Vue2 主要用 Object.defineProperty 劫持已有属性，数组和新增属性有一些限制；Vue3 改用 Proxy，能更完整地代理对象操作。Vue3 引入 Composition API，让复杂组件按业务逻辑组织代码，也更利于复用和 TypeScript 推断。性能上 Vue3 有更好的编译优化、静态提升、patch flag、Tree Shaking 和更小的响应式粒度。迁移时要关注全局 API、生命周期命名、v-model、过滤器、第三方库兼容和响应式对象解构丢失等问题。

考点 核心机制与工程取舍

难度 中高频面试题

回答目标 按定义、机制、场景讲清楚

深入解析

响应式机制不同

Vue2 基于 Object.defineProperty 对属性做 getter/setter 劫持，初始化时需要递归遍历已有属性，新增属性和数组索引变更需要额外 API 或特殊处理。Vue3 使用 Proxy 代理对象，可以拦截 get、set、has、deleteProperty 等操作，对新增属性、删除属性和集合类型支持更自然。

逻辑组织方式变化

Vue2 以 Options API 为主，data、methods、computed、watch 按选项分类，简单组件可读性很好。复杂组件里同一业务逻辑会分散到多个选项。Vue3 的 Composition API 可以把同一业务的状态、计算、监听和方法聚合到一个组合函数中。

编译和运行时优化

Vue3 编译阶段会标记动态节点、提升静态内容、缓存事件处理，并让运行时 patch 更聚焦真正变化的部分。它还支持 Fragment、Teleport、Suspense 等能力，减少无意义包裹节点并覆盖更复杂的渲染场景。

TypeScript 和工程体验

Vue3 从 API 设计上更适合类型推断，setup、ref、reactive、defineProps、defineEmits 能和 TS 更自然配合。Vue2 也能用 TS，但在 this 类型、插件扩展和复杂组件推断上成本更高。

迁移关注破坏性变化

迁移不是简单替换依赖。要检查 createApp 取代全局 Vue 构造器、生命周期 beforeDestroy/destroyed 改名、v-model 语法变化、过滤器移除、事件总线实践变化、插件和组件库是否支持 Vue3。

回答要避免绝对化

Vue3 通常在性能、类型和大型组件组织上更有优势，但小项目或稳定老项目未必立刻迁移。面试回答要说明收益、迁移成本和兼容策略，而不是简单说 Vue3 全面替代 Vue2。

易错点

只背 defineProperty 和 Proxy，不解释新增属性、数组、集合类型和依赖追踪差异。
把 Composition API 说成替代 Options API 的语法糖，忽略逻辑复用和类型推断收益。
迁移时只改生命周期名，不检查插件、组件库、过滤器、v-model 和全局 API。
认为 Vue3 一定让所有页面更快，不结合组件结构和业务性能瓶颈分析。

面试官追问

Vue3 的 reactive 和 ref 怎么选？

对象状态可以用 reactive，基础值或需要整体替换的值常用 ref。模板会自动解包 ref，但在 JS 里要用 .value；复杂业务里更重要的是保持状态边界清晰。

为什么响应式对象解构会丢响应？

直接解构会把属性值取出来变成普通变量，脱离 Proxy 的 get/set 代理。需要用 toRef、toRefs 或保持通过原响应式对象访问。

Composition API 是否一定比 Options API 好？

不是。简单组件 Options API 很直观；复杂组件、跨组件逻辑复用、TS 推断和按业务聚合逻辑时 Composition API 更有优势。

Vue3 性能优化主要来自哪里？

来自响应式粒度、编译期静态提升、patch flag、事件缓存、Tree Shaking 和更高效的 diff 路径，但最终效果仍取决于业务代码和组件结构。