面试官问你，vue3带来的亮点？

Vue 3 的主要改进可以总结如下，这些改进使得 Vue 在性能、开发体验和功能上都得到了显著提升：

1：包小；
2：Object.defineProperty 换成 Proxy；
3：重构Virtural Dom；
4：Performance（3比2性能快2倍）；
5：支持tree shaking，按需，体积更小；
6：Composition （类似react的hook）；
7：三个组件特性：Fragment、Teleport、Suspense；
8：更好支持ts了。

上面8点这几点背诵即可，下面文章看不看都没问题了。

---

1. 更小的体积

• 压缩后体积减半：Vue 3.0 的运行时大小从 Vue 2 的约 20kB 减少到 10kB。
• Tree-shaking 支持：核心 API 支持按需引入，未使用的功能不会打包到最终产物中。

---

2. 响应式系统升级

• Proxy 替代 Object.defineProperty：
  • 直接代理整个对象，而非属性，性能更高。
  • 支持动态新增属性、数组索引修改等 Vue 2 中需要 $set 的场景。
  • 减少了初始化时的递归遍历开销。

---

3. Virtual DOM 重构

• 动静结合的 Diff 优化：
  • 编译时分析模板，区分静态和动态节点，仅追踪动态部分。
  • 更新性能从与模板大小相关优化为与动态节点数量相关。
• 区块切割：将模板按动态指令切割为嵌套区块，每个区块只需追踪自身的动态节点。

---

4. 性能提升

• 整体速度提升 2 倍：
  • 虚拟 DOM 重写、运行时编译优化。
  • SSR 渲染速度提高。
  • 组件更新效率更高。

---

5. Composition API

• 逻辑复用与代码组织：
  • 解决 Vue 2 中 mixin 的命名冲突和来源不清晰问题。
  • 类似 React Hooks 的纯函数风格，支持更灵活的逻辑组合。
  • 更好的 TypeScript 类型推导。
• 示例：

  import { ref, onMounted } from 'vue';
  function useMouse() {
    const x = ref(0);
    onMounted(() => window.addEventListener('mousemove', (e) => x.value = e.clientX));
    return { x };
  }
  

---

6. 新增组件

• Fragment：支持多根节点组件，无需额外包裹元素。
• Teleport（类似 React Portal）：将子组件渲染到 DOM 任意位置（如模态框）。
• Suspense：处理异步组件加载状态，显示 fallback 内容(Suspense 让你的组件在渲染之前进行“等待”，并在等待时显示 fallback 的内容)。

---

7. 更好的 TypeScript 支持

• 代码库用 TypeScript 重写，提供完整的类型定义。
• Composition API 天然适合类型推导，减少类型声明成本。

---

8. 其他改进

• 自定义渲染器：允许非 DOM 环境的渲染（如小程序、Canvas）。
• 模块化架构：响应式、运行时编译等模块可单独使用。

---

总结

vue3则是使用ts进行了重写，开发者使用vue3时拥有更好的类型支持和更好的编写体验。

Vue 3 通过底层优化（Proxy、Virtual DOM）、设计改进（Composition API）和功能增强（Tree-shaking、TS 支持）全面提升了框架性能、灵活性和开发体验，同时保持了对 Vue 2 的兼容性。