Vue为什么要引入 Composition API？与 Options API 相比有什么优势？
Vue 引入 Composition API（组合式 API） 主要是为了解决 Vue 2 中 Options API（选项式 API） 在处理大型复杂组件和逻辑复用时面临的痛点。
以下是详细的对比和优势分析：
1. 逻辑组织与关注点分离 (Logic Organization)
这是最核心的原因。
Options API 的问题（碎片化）：
在 Options API 中，代码是按照“选项”分类的（data,methods,computed,watch,mounted等）。
当一个组件变得很复杂（例如包含搜索、排序、分页、过滤四个功能）时，每个功能的逻辑会被拆分到不同的选项中。- 后果： 开发或维护某个特定功能（如“搜索”）时，你需要不断地在代码文件中上下滚动，在
data里找变量，在methods里找函数，在watch里找监听器。这种现象被称为“反复横跳”。
- 后果： 开发或维护某个特定功能（如“搜索”）时，你需要不断地在代码文件中上下滚动，在
Composition API 的优势（聚合）：
Composition API 允许我们将与同一个逻辑关注点相关的代码（变量、方法、生命周期等）写在一起。- 后果： 代码更加内聚，阅读和维护时只需要关注当前功能的代码块，而不需要在几百行代码中跳来跳去。
2. 逻辑复用 (Logic Reuse)
在 Vue 2 中，复用逻辑主要依靠 Mixins（混入），但 Mixins 有严重的缺陷。
Options API (Mixins) 的问题：
- 命名冲突： 如果两个 Mixin 使用了相同的属性名（如
handleScroll），会发生冲突，且难以察觉。 - 数据来源不清晰： 在组件中使用
this.x时，很难一眼看出x是来自组件本身，还是来自 Mixin A，或者是 Mixin B。 - 隐式依赖： Mixin 之间可能存在相互依赖，导致耦合度极高，难以维护。
- 命名冲突： 如果两个 Mixin 使用了相同的属性名（如
Composition API (Composables) 的优势：
通过编写 Composable 函数（通常以use开头，如useMouse,useFetch），可以完美解决上述问题：- 无命名冲突： 引入变量时可以随意重命名（解构赋值）。
- 来源清晰：
const { x, y } = useMouse()，一眼就能看出数据来自哪里。 - 显式依赖： 参数和返回值都是显式的函数调用，逻辑流向非常清晰。
3. 更好的 TypeScript 支持
Options API 的问题：
Options API 严重依赖this上下文。在 TypeScript 中，推导复杂的this类型非常困难，导致 Vue 2 的 TS 支持体验并不完美（往往需要使用vue-class-component这种装饰器写法，增加了学习成本）。Composition API 的优势：
Composition API 本质上就是普通的 JavaScript 函数和变量。它天然对 TypeScript 友好，不需要复杂的类型体操就能获得极好的类型推导和自动补全体验。
4. 代码体积与性能 (Tree-shaking)
Options API：
Vue 2 的对象式写法导致所有选项（data, methods 等）无论是否被使用，都很难被打包工具（如 Webpack, Rollup）进行 Tree-shaking（摇树优化），因为它们是对象的属性。Composition API：
基于函数的写法对压缩工具更友好。- 未使用的函数（API）可以被轻松 Tree-shake 掉。
- 变量名可以被压缩工具缩短（例如
const count = ref(0)压缩后变成const a=h(0)），而 Options API 中的对象属性名（如data: { count: 0 }）通常不能被安全地压缩。
总结：对比图表
| 特性 | Options API (Vue 2 风格) | Composition API (Vue 3 风格) |
|---|---|---|
| 代码组织 | 按选项类型（data, methods）分组 | 按逻辑功能（feature）分组 |
| 逻辑复用 | Mixins (有命名冲突、来源不明等问题) | Composables (函数式组合，清晰明确) |
| TypeScript | 支持较差，依赖 this 推导困难 |
天然支持，类型推导极佳 |
| 适用场景 | 简单组件，逻辑不复杂 | 大型组件，逻辑复杂，需要高度复用 |
| 心智模型 | 基于对象配置 (Object-based) | 基于函数组合 (Function-based) |
注意： Vue 3 并没有废弃 Options API，它依然有效且适合中小型项目或简单的组件。Composition API 是为了解决规模化（Scale）开发带来的问题而引入的高级工具。