Vue 3 与 Vue 2 有什么不同？

Vue 3 相比 Vue 2 进行了全面的升级与优化，主要差异体现在以下方面：

1. 性能优化

• Vue 3 使用 基于 Proxy 的响应式系统， 取代 Vue 2 的 Object.defineProperty. 这支持 直接检测对象的动态属性变更, 无需 额外方法如 Vue. set.
• 引入了 编译优化机制, 如 静态节点提升 和 事件侦听器缓存, 大幅提升渲染速度 1.3~2 倍, SSR 性能也提升 2~3 倍.
• 借助 Tree-shaking, 核心代码体积减少约 40%, 运行更高效.

2. Composition API

• Vue 3 的 Composition API( e. g. setup(), ref, reactive) 取代了 Vue 2 的 Options API( e. g. data, methods). 它将 相关逻辑代码整合在一起, 解决了 Vue 2 的 代码可维护性差和复用困难的问题 .

  // Vue 3 Composition API
  <script setup>
  import { ref } from 'vue';
  const count = ref(0);
  const increment = () => count.value++;
  </script>
  

• 在 复杂组件场景 提供更 清晰的代码结构.

3. TypeScript 集成

• Vue 3 完全基于 TypeScript 重写, 提供 完整类型推断和检查. Vue 2 虽支持 TypeScript, 但需额外设置与声明文件的辅助.

4. API 与组件框架改进

• 生命周期钩子重命名: beforeDestroy 变 beforeUnmount, destroyed 变 unmounted.
• 移除了过时API like Vue.extend, 提供 新的全局API模式.
• 增加了 内置组件 like Teleport(渲染任意位置内容) 和 Suspense(处理 异步加载.