在 Vue 2 的基础上，Vue 3 引入了哪些新的功能和改动？请列出主要新特性，并对比 Vue 2 与 Vue 3 在性能、API 设计、响应式系统及组合逻辑复用等方面的具体差异。
考察说明
考查对 Vue 3 核心特性的掌握以及版本间差异的理解
回答思路
- 【回答框架 1】Vue 3 的主要新特性包括 Composition API、基于 Proxy 的响应式系统、更快的虚拟 DOM 与编译优化、Fragment/Teleport/Suspense 等内置组件，以及更好的 TypeScript 支持。这些特性共同提升了开发体验与运行性能。
- 【回答框架 2】响应式系统差异：Vue 2 使用 Object.defineProperty 遍历对象属性进行劫持，无法检测新增/删除属性，需用 Vue.set/Vue.delete 弥补；Vue 3 改用 Proxy 代理整个对象，可拦截属性访问、赋值及删除，并能自动追踪嵌套对象，减少边界问题。须注意 Proxy 的兼容性，低版本浏览器需编译或降级。
- 【回答框架 3】性能与编译优化：Vue 3 的虚拟 DOM 采用静态树提升、静态属性提升和事件缓存等编译时优化，减少运行时渲染开销；新编译器在生成代码时标记动态节点，使 diff 只对比变化部分。Vue 2 的 diff 是整体对比，在大型列表或频繁更新场景下开销更高。
- 【回答框架 4】API 设计差异：Vue 2 以 Options API 为主要模式，通过 data、methods、computed 等选项组织逻辑；Vue 3 引入 Composition API，在 setup 函数中按逻辑关注点组合代码，更方便抽取复用逻辑，且与 Options API 可共存。组合式函数封装状态和副作用，替代部分 mixin 方案，降低命名冲突风险。
- 【回答框架 5】其他变化：Vue 3 允许组件模板使用多个根节点，支持 Fragment；新增 Teleport 用于渲染到指定 DOM 节点，Suspense 用于异步组件加载；生命周期钩子改名（如 beforeDestroy 变为 beforeUnmount），且支持同时使用 Options 与 Composition 语法。迁移需按官方指南调整兼容代码。
- 【关键点 1】Composition API 提供更灵活的逻辑复用方式，与 Options API 可混合使用
- 【关键点 2】Vue 3 响应式基于 Proxy，解决 Vue 2 无法检测属性新增/删除的问题
- 【关键点 3】编译优化与虚拟 DOM 改进使 Vue 3 渲染性能更高，尤其在大型应用上
- 【关键点 4】Vue 3 支持多根节点组件、Teleport、Suspense 等新特性
- 【关键点 5】破坏性变更包括自定义指令生命周期、v-model 用法及事件 API 调整
- 【易错点 1】不能简单断言 Vue 3 一定比 Vue 2 快，性能差异取决于应用场景与写法，例如大量动态绑定时优化效果有限
- 【易错点 2】Proxy 无法兼容 IE11，需考虑降级方案或使用 @vue/compat 迁移构建
- 【易错点 3】迁移时注意 v-model 在自定义组件上的 prop 和事件名变化，以及移除 filter 后的替代写法