---

1. Vue 3 更聪明，不需要 this.$set，改了值都能监听到

• 完全正确。
• Vue 2 基于 Object.defineProperty，无法监听新增/删除属性或数组索引赋值（如 arr[0] = x）。
• Vue 3 使用 Proxy，能拦截所有对象操作，真正做到“你改我就知道”。

补充：Vue 3 还能监听 Map、Set 等数据结构，Vue 2 完全做不到。

---

2. 一个功能的所有逻辑都在一块，不用像 Vue 2 一样来回翻找

• 精准概括了 Composition API 的优势。
• 在 Vue 2 中，一个功能（比如“用户登录”）的 data、methods、watch 可能散落在组件各处；
• Vue 3 的 setup() + ref/reactive/computed 允许你把相关逻辑封装成函数（甚至抽离成 composable），大幅提升可维护性。

示例：

// Vue 3 中可以这样组织
const { user, login, logout } = useAuth(); // 所有登录逻辑在一个函数里

---

3. <Teleport to="body">，一键传送

• 完全正确。
• 这是 Vue 3 新增的内置组件，解决“弹窗被父级样式限制”的经典问题。
• Vue 2 需要手动操作 DOM 或用第三方库（如 portal-vue）。

---

4. Vue 3 允许多个根节点（Fragments）

• 正确！
• Vue 2 强制要求模板只有一个根元素（否则报错）；
• Vue 3 支持多个根节点，更符合 HTML 语义，减少无意义的 <div> 包裹。

---

5. 原生支持 TS，类型推导友好

• 非常对。
• Vue 2 的类型定义是“后加的”，很多地方需要手动标注；
• Vue 3 用 TypeScript 重写，类型自动推导极强，开发体验接近 React + TS。

---

6. 打包体积更小，所以更快

• 基本正确，但需稍作澄清：

  • Vue 3 通过 Tree-shaking（按需引入）减小体积；
  • 实际“快”主要体现在 运行时性能（见第7点），而体积小 → 加载快 → 首屏更快。

数据参考：Vue 3 运行时体积比 Vue 2 小约 41%（官方数据）。

---

7. 虚拟 DOM 重写，性能更快

• 完全正确。

• Vue 3 优化了 diff 算法：

  • 静态节点直接跳过比对；
  • 动态节点标记优化，减少不必要的遍历。
• 结果：更新速度提升 1.3~2 倍（官方 benchmark）。

---

额外补充：

• 生命周期钩子命名变化：
  Vue 2 的 beforeDestroy → Vue 3 的 onBeforeUnmount（Composition API 中）。
• 全局 API 变更：
  Vue 2 的 Vue.component() → Vue 3 的 app.component()（避免全局污染）。
• 自定义渲染器：
  Vue 3 可轻松对接非 DOM 环境（如小程序、Canvas），架构更灵活。

---

对比维度	Vue 2	Vue 3	一句话说明
响应式原理	Object.defineProperty	Proxy	Vue 3 能监听新增/删除属性，无需 $set
API 风格	仅 Options API	Options API + Composition API	逻辑可按功能聚合，不再“东一块西一块”
根节点限制	必须有且仅有一个根元素	支持多个根节点（Fragments）	模板更自由，减少无意义 <div> 嵌套
Teleport	不支持（需第三方库）	内置 <Teleport>	弹窗、浮层轻松挂到 body，不怕样式穿透
TypeScript 支持	支持弱，类型体验差	原生 TS 编写，类型推导强大	开发更安全，IDE 智能提示更准
打包体积	较大（无法 Tree-shaking）	更小（支持按需引入）	首屏加载更快，尤其对移动端友好
性能	快	更快（重写虚拟 DOM + 编译优化）	更新效率提升 1.3~2 倍，静态节点直接跳过
维护状态	已于 2023 年底停止官方维护	当前主力版本，持续更新	新项目请优先选 Vue 3