Vue3 相比 Vue2 有哪些重要变化？

简化版

Vue3 重要变化包括：响应式从 Object.defineProperty 改为 Proxy，新增 Composition API，更好的 TypeScript 支持，Fragment、Teleport、Suspense，性能优化和更好的 Tree Shaking。整体更适合大型复杂组件和逻辑复用。

详细版

主要变化：

响应式：Vue2 用 defineProperty，Vue3 用 Proxy。
API：Vue3 引入 Composition API，逻辑复用更灵活。
模板：支持多个根节点 Fragment。
内置组件：Teleport 可把 DOM 渲染到外部节点，Suspense 处理异步依赖。
性能：编译优化、静态提升、patch flag。
TS：类型推断更好。

Vue3 不是完全抛弃 Options API，它仍然支持 Options API；Composition API 是新增的组织逻辑方式。

完整版教学

一、响应式系统升级

Vue2 用 Object.defineProperty 对属性 getter/setter 劫持，对新增属性、删除属性、数组索引等处理有局限，需要 $set 等补充 API。

Vue3 用 Proxy 代理整个对象，能拦截更多操作，响应式能力更完整。

二、Composition API 解决逻辑复用问题

Options API 按 data、methods、computed、watch 分组选项。组件复杂后，同一个业务逻辑会散落在多个选项里。

Composition API 可以按功能组织代码：

const { list, loading, refresh } = useList();

这让复杂页面和组合式函数更好维护。

三、性能优化

Vue3 编译器能标记动态节点，运行时更新时更精准。静态内容可以提升，事件处理可以缓存，Diff 时可以利用 patch flag 减少比较成本。

这些优化大多对开发者透明，但能提升大型应用性能。

四、生态和迁移注意

Vue3 生态现在已经成熟，但老项目从 Vue2 迁移仍要关注插件兼容、Vue Router/ Vuex 版本、过滤器移除、生命周期命名变化等。

迁移不是把 new Vue 改成 createApp 就结束，还要盘点依赖是否直接访问 Vue2 内部 API、测试是否覆盖关键行为，以及服务端渲染和构建工具是否兼容。先升级基础设施和高风险插件，再按模块迁移业务代码，能把问题定位在更小范围。

五、面试追问与工程落地

Vue2/Vue3 常见追问是“Composition API 是否一定比 Options API 好”。答案不是绝对。简单组件用 Options API 也很清晰；复杂组件、逻辑复用、多状态组合时 Composition API 优势明显。Vue3 支持两者，关键是按复杂度选择。

还会问迁移风险。Vue2 项目迁到 Vue3，要关注 Vue Router、Vuex/Pinia、UI 组件库、过滤器、事件总线、全局 API、第三方插件兼容。大型项目通常不会一刀切，而是先升级构建和依赖，再逐模块迁移。

工程里 Vue3 的价值不只是新语法。Proxy 响应式、编译器 patch flag、Teleport、Fragment、TS 支持，都改善了大型项目体验。面试时把“框架 API 变化”和“底层能力变化”分开讲，更有层次。

六、把差异拆成运行时、编译器和工程三层

Vue3 的升级不只是 API 列表。运行时层用 Proxy 与重写后的响应式包支持更完整的对象操作；编译器层通过 patch flag、静态提升和 block tree 标记动态内容；工程层提供 Composition API、更好的 TypeScript 推断以及可 tree-shake 的模块化 API。三层一起解释，才能说明为什么大型应用的组织和更新效率会改善。

模板编译
  ├─ 静态节点：提升并跳过重复创建
  └─ 动态节点：附 patch flag
               ↓
运行时更新只检查标记过的动态部分

维度	Vue2	Vue3
对象响应式	`Object.defineProperty` 逐属性	Proxy 代理对象，集合也可支持
逻辑组织	Options API 为主	Options + Composition API
根节点	单根组件模板	Fragment 多根节点
全局 API	`Vue.use` 等全局共享	`createApp` 应用实例隔离
类型支持	后加类型，推断受限	核心以 TypeScript 重写
生产状态	已结束维护	当前主线版本

一个包含 1000 个 vnode、其中只有 20 个动态绑定的区块，编译提示能让运行时重点遍历这 20 个动态节点，而不是对所有静态内容做同等工作。数字是机制示意，具体优化取决于模板结构，不能宣称任意页面都会固定提升某个百分比。

迁移还涉及破坏性变化：应用创建方式、v-model 契约、生命周期命名、事件 API、过滤器以及生态依赖都可能变化。迁移构建允许部分 Vue2 行为过渡，但大型项目仍应先做依赖盘点和测试基线，再按模块消除兼容行为；把语法机械替换并不能验证运行时语义。

Composition API 也不是强制替代 Options API。简单页面使用 Options API 仍可读，复杂组件按业务能力组合逻辑更有优势；真正收益来自逻辑复用、类型推断和相关代码聚合，而不是把所有代码塞进一个巨大 setup。

记忆框架：Proxy 是响应式层，patch flag 是编译更新层，Composition API 是逻辑组织层；迁移题还要单独回答生态和破坏性变化。

七、常见误区与追问

误区：Vue3 已经删除 Options API。 Vue3 仍正式支持 Options API，Composition API 是新增选择而非强制替换。
误区：Proxy 让 Vue3 不再需要任何数组和集合处理。 Proxy 只提供拦截能力，框架仍需定义迭代、length、Map/Set 等依赖语义。
误区：Composition API 会自动让组件更清晰。 若不按功能拆 composable，巨大的 setup 同样难维护；组织方式仍取决于设计。
追问：Vue3 为什么更利于 tree shaking？ 许多全局能力改为具名导出的模块 API，现代打包器可以分析并移除未使用部分。
追问：patch flag 有什么作用？ 编译器标记节点的动态类型，运行时更新时只处理需要比较的属性或内容。
追问：Vue2 新增属性为何常需要 set？ defineProperty 需要预先转换已有属性，运行时新增键没有自动安装访问器；Proxy 能拦截后续 set。
追问：大型 Vue2 项目怎样迁移？ 先盘点依赖与破坏性变化、建立测试，再借助兼容构建或模块化迁移逐步替换，避免一次性重写。

八、加强记忆

Vue3 的关键词是 Proxy、Composition API、TypeScript、性能优化和新内置能力。它不是只换语法，而是让大型应用的逻辑组织和类型体验更好。

回答升级题时把运行时、编译器和工程迁移分层，既说明收益，也交代依赖兼容和破坏性变化的成本。

简化版

详细版