Vue 3 是 Vue.js 框架的重大升级，引入了许多新特性和优化，主要特点包括：

---

1. Composition API（组合式 API）

• 替代 Options API：提供更灵活的代码组织方式，逻辑可以按功能组合，而不是分散在 data、methods 等选项中。

• 更好的逻辑复用：通过 setup() 函数和自定义 Hook（如 useFetch）实现逻辑复用，避免 Mixins 的命名冲突问题。

• 示例：

  javascript

  import { ref, computed } from 'vue';
  export default {
    setup() {
      const count = ref(0);
      const double = computed(() => count.value * 2);
      return { count, double };
    },
  };

---

2. 性能优化

• 更快的渲染：重写虚拟 DOM（Virtual DOM）实现，优化 diff 算法。

• Tree-shaking 支持：按需引入 API，减少打包体积（如未使用的功能不会被包含）。

• 静态提升（Static Hoisting）：编译时标记静态节点，减少运行时开销。

---

3. 更好的 TypeScript 支持

• 源码用 TypeScript 重写，提供完整的类型推断，适合大型项目开发。

---

4. 新的响应式系统

• 基于 Proxy 重构响应式，解决 Vue 2 中 Object.defineProperty 的局限性（如无法检测新增属性、数组变化等）。

• 独立的核心库 @vue/reactivity，可脱离 Vue 使用。

---

5. 片段（Fragments）

• 支持多根节点模板，无需额外包裹 <div>。

---

6. Teleport（传送门）

• 将组件渲染到 DOM 的任意位置（如模态框、全局提示等）。

html

<teleport to="body">
  <div class="modal">内容</div>
</teleport>

---

7. Suspense（异步组件）

• 简化异步组件（如数据加载）的等待状态处理。

html

<Suspense>
  <template #default><AsyncComponent /></template>
  <template #fallback>Loading...</template>
</Suspense>

---

8. 更小的体积

• 核心库压缩后约 10KB（Vue 2 约 20KB）。

---

9. 其他改进

• 自定义渲染器：支持非 DOM 环境（如 WebGL、终端）。

• v-model 增强：支持多个 v-model 绑定（如 <Child v-model:title v-model:content>）。

• 全局 API 调整：createApp() 替代 new Vue()，避免全局污染。

---

10. 兼容性

• 支持 Vue 2 的绝大部分特性，提供迁移工具（@vue/compat）。

---

总结

Vue 3 通过 Composition API、性能优化 和 更好的 TypeScript 集成，提升了开发体验和代码可维护性，同时保持了 Vue 2 的易用性。适合新项目或需要长期维护的大型应用。