真实面经题目 · 原创解析
Vue 3 相比 Vue 2 有哪些优势？
Vue 3 相比 Vue 2 的优势主要体现在 Composition API 带来的逻辑组织能力、基于 Proxy 的响应式系统、更好的 TypeScript 支持、更小更可摇树优化的包结构、更快的编译和运行时性能，以及 Fragment、Teleport、Suspense、多 v-model 等工程能力。
出现于：字节跳动 · 前端
01
60 秒回答模板
可以从开发体验、响应式原理、性能和框架能力四个方向回答。开发体验上，Vue 3 提供 Composition API 和 script setup，复杂组件可以按业务逻辑聚合代码，而不是散落在 data、methods、computed、watch 中；类型推导也更好。响应式上，Vue 2 使用 Object.defineProperty，需要递归劫持已有属性，对新增属性和数组下标有局限；Vue 3 使用 Proxy，能代理对象级别的 get、set、has、deleteProperty 等操作。性能上，Vue 3 编译器能生成 patch flag、block tree，运行时更容易跳过稳定节点，包也更模块化。能力上，Vue 3 支持多根节点、Teleport、Suspense、多个 v-model 和更清晰的 emits 声明。
考点 Composition API
难度 真实面经高频题
回答目标 讲清机制、边界和追问
02
深入解析
逻辑组织
Vue 2 的 Options API 按选项类型组织代码，同一个业务逻辑可能分散在 data、computed、methods、watch、生命周期钩子中。组件简单时这种结构清晰，但复杂组件会出现逻辑碎片化。Vue 3 的 Composition API 允许按业务关注点组织状态、计算、监听和副作用，自定义组合函数也更容易复用逻辑，不必依赖 mixin 带来的命名冲突和来源不透明问题。
响应式系统
Vue 2 基于 Object.defineProperty，对对象已有属性逐个劫持，初始化时需要递归处理，新增属性、删除属性、数组下标和 length 修改都存在额外限制。Vue 3 使用 Proxy 包裹对象，可以拦截更多操作，天然支持属性新增、删除、in 操作和集合类型处理。它还把响应式能力拆成独立模块，reactive、ref、computed、watch 等 API 可以在组件外复用。
性能改进
Vue 3 的性能提升不只是 Proxy。编译器会识别动态节点并生成 patch flag，运行时更新时可以更精准地跳过静态内容；block tree 能减少无关子树遍历；静态提升和事件缓存也能降低重复创建成本。对于大型组件树，这些编译期信息让虚拟 DOM diff 更有目标，而不是每次都做过多保守比较。
工程体验
Vue 3 对 TypeScript 更友好，类型定义从核心设计上就考虑组合式 API、props、emit、插槽和模板推导。script setup 减少样板代码，defineProps、defineEmits、defineExpose 等宏让组件接口更明确。Vue 3 的包结构更模块化，未使用的能力更容易被构建工具移除，也更适合现代 ESM 工程体系。
新能力边界
Vue 3 支持 Fragment，组件可以有多个根节点，减少无意义包裹层；Teleport 可以把弹窗、浮层渲染到组件树外的 DOM 位置，同时保留逻辑关系；Suspense 可以协调异步组件和异步 setup 的加载状态；多 v-model 改善复杂受控组件接口。这些能力解决的是 Vue 2 中常见的结构、浮层和异步组织痛点。
03
易错点
- 只说 Vue 3 更快，却说不清编译器和运行时如何减少更新成本。
- 把 Composition API 理解成语法变化，没有讲到逻辑复用和复杂组件组织。
- 认为 Proxy 只是写法更现代，遗漏新增属性、删除属性、数组和集合处理上的差异。
- 忽略 Vue 3 迁移中的兼容成本，例如生态版本、全局 API 变化和部分 Vue 2 插件不兼容。
04
面试官追问
Vue 3 为什么用 Proxy 替代 Object.defineProperty？
Proxy 能拦截整个对象的多种操作，包括新增属性、删除属性、in 检查和集合访问，不需要对每个属性递归定义 getter/setter。它解决了 Vue 2 响应式系统的一些天然限制。
Composition API 是否一定比 Options API 好？
不是。简单组件用 Options API 仍然清晰。Composition API 的优势主要在复杂逻辑复用、类型推导和按业务关注点组织代码，适合状态和副作用较多的组件。
Vue 3 的性能提升主要来自哪里？
来自响应式系统、编译器和运行时协同。编译器标记动态内容，运行时根据 patch flag 和 block tree 精准更新；静态提升和事件缓存减少重复工作。
Teleport 解决什么问题？
它解决浮层 DOM 位置和组件逻辑归属不一致的问题。弹窗可以渲染到 body 等更合适的位置，避免 z-index、overflow、定位上下文问题，同时仍由原组件控制状态和事件。
