Vue 常见问题

1. 组合式 API (Composition API) 与选项式 API (Options API) 有什么区别？

核心区别在于代码的组织方式和逻辑复用能力：

• 选项式 API (Options API)：

  • 这是 Vue 2 的经典风格。
  • 通过包含多个选项的对象（如 data, methods, mounted 等）来描述组件逻辑。
  • 特点：结构强制规范，易于新手上手，但在处理复杂逻辑时，相关功能的代码会被分散在不同的选项中，导致维护困难。

• 组合式 API (Composition API)：

  • Vue 3 引入的新风格（通常配合 <script setup> 使用）。
  • 通过导入的函数（如 ref, onMounted）来定义组件逻辑。
  • 特点：允许将相关功能的代码组织在一起，不再受限于选项的分类。这使得代码更加灵活，且极大地增强了逻辑复用能力（通过自定义 Hook）。

2. 组合式 API 与选项式 API 可以在同一个组件中使用吗？

可以。

Vue 3 允许在同一个组件中混合使用两种 API。

• 你可以在使用 data 和 methods 的同时，使用 setup() 选项。
• 注意：选项式 API 可以访问组合式 API 暴露出的属性（通过 this），但组合式 API 的 setup() 中无法访问选项式 API 定义的属性（因为 setup 执行时机更早，且没有 this）。
• 建议：在实际开发中，建议新项目优先统一使用组合式 API (<script setup>)，以保持代码风格一致。

3. 组合式 API 相比选项式 API 有什么优势？

1. 更好的逻辑复用：

   • 选项式 API 依靠 Mixins 复用逻辑，容易导致命名冲突和数据来源不清晰。
   • 组合式 API 可以通过编写“组合式函数”（Composables）完美解决逻辑复用问题。

2. 更灵活的代码组织：

   • 在大型组件中，组合式 API 允许我们将处理同一个业务逻辑的代码（状态、方法、生命周期）放在一起，而不是分散在 data、methods 等不同区块中。

3. 更好的 TypeScript 支持：

   • 组合式 API 大多使用普通的变量和函数，天然对类型推导更友好，不需要像选项式 API 那样做复杂的类型体操。

4. 更小的生产包体积：

   • 搭配 <script setup> 使用时，编译后的代码更利于 minifier 进行压缩和 Tree-shaking。