一句话定义：Vue 3 是对 Vue 2 的一次彻底重构。它在保留声明式编程的基础上，通过 Proxy 响应式 和 Composition API 解决了复杂逻辑复用难、底层性能瓶颈等痛点。
1. 为什么需要 Vue 3？（痛点解决）
- 逻辑碎片化：Vue 2 的 Options API（选项式）让一个功能的代码散落在
data、methods、watch中，项目大了像找零件一样痛苦。 - 响应式局限：Vue 2 无法监听对象新增属性和数组下标修改，不得不发明
$set这种“补丁”。 - 类型支持：Vue 2 对 TypeScript 的支持是“强扭的瓜”，Vue 3 用 TS 重写，原生支持极佳。
2. 核心差异对比
| 维度 | Vue 2.x (旧方案) | Vue 3.x (新方案) |
|---|---|---|
| 响应式核心 | Object.defineProperty (深度遍历属性) | Proxy (代理整个对象) |
| 代码组织 | Options API: 强制把逻辑按“类型”拆分 | Composition API: 按“功能单元”组织代码 |
| 虚拟 DOM | 全量 Diff: 数据变了，所有节点比一遍 | 静态提升 + Patch Flag: 只对比动态节点 |
| 多根节点 | 不支持 (必须有一个 <div> 包裹) | Fragment: 支持多个根节点 |
3. Vue 3 的优势
- ✅ 更好的性能：
Proxy性能优于defineProperty，且初始化速度更快。 - ✅ Tree-shaking (摇树优化)：Vue 3 把很多功能（如
watch,computed）改成了按需引入。没用到的功能在打包时会被自动剔除，体积更小。 - ✅ 组合式 API (setup)：逻辑复用极其方便（类似 React Hooks），不再需要冗余的
mixins。
4. 局限性与挑战
- ❌ 兼容性：
Proxy是 ES6 特性，不支持 IE11（这也是很多老项目不敢升 Vue 3 的主因）。 - ❌ 学习成本：
ref和reactive的心智负担，新手容易混淆什么时候该加.value。 - ❌ 生态迁移：虽然现在已经成熟，但早期很多老插件不支持 Vue 3。
面试真题：大厂高频考点
Q1：Proxy vs Object.defineProperty 的本质区别？
- defineProperty：只能劫持已有的属性。如果对象嵌套很深，需要递归遍历到底，性能开销大。
- Proxy：代理的是整个对象。哪怕你动态加了 100 个属性，它都能拦截到。此外，它还能拦截数组下标变化、
delete操作等。
Q2：setup 的作用与优势？
setup是 Composition API 的入口。- 逻辑复用：解决了 Mixins 命名冲突 and 来源不明的问题。
- 组织清晰：让代码逻辑可以像积木一样抽离成独立的函数（Hooks），在不同组件间灵活组合。
Q3：Tree-shaking 如何减少未使用代码？
- Vue 2 的很多全局 API 是挂载在 Vue 原型上的，不管你用不用都会被打进包里。
- Vue 3 改成了 ES Modules (import/export) 导出方式。编译器在打包时会分析依赖树，没被
import的代码会被标记为“死代码”并剔除，从而显著减小首屏加载体积。