Vue 3.0 采用的 Composition API 与 Vue 2.x 的 Options API 有什么不同？

⚡ 速记答案（30 秒）

组织方式：Composition API 在 setup 中按"功能块"组织；Options API 按 data/methods/computed 分散。逻辑复用：Composition API 用组合函数；Options API 用 mixin。TypeScript 支持：Composition API 更友好。

📖 详细讲解

标准面试回答（推荐记住）

Options API 按选项类型分散代码，同一功能的逻辑可能分布在 data、methods、computed 等多处；Composition API 允许按功能聚合代码，更容易抽取和复用。Composition API 是函数式写法，TypeScript 类型推断更好。两者可以混用，根据项目需求选择。

对比维度

1. 代码组织

Options API: 以"属性"为中心的分类（data 放一起，methods 放一起）。适合小型、逻辑简单的组件。
Composition API: 以"逻辑关注点"为中心的分类（功能A的状态、方法、副作用放一起）。适合大型、逻辑复杂的组件。

2. 逻辑复用

Options API: Mixins。缺点：命名冲突、数据来源不清晰。
Composition API: Composables (Hooks)。优点：引用清晰、无命名冲突、类型安全。

3. TypeScript

Options API: 需要复杂的类型体操，this 类型推断容易失效。
Composition API: 天然的函数式编程，极佳的类型推断体验。

4. 打包体积

Composition API 更有利于 Tree-shaking，未使用的功能不会被打入包中。

✅ 面试要点

•理解两种 API 的组织方式差异
•知道 Composition API 的复用优势
•能根据场景选择合适的 API

💻 代码示例

Options vs Composition

<!-- Options API -->
<script>
export default {
  data() {
    return { count: 0 }
  },
  computed: {
    double() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}
</script>

<!-- Composition API -->
<script setup>
import { ref, computed } from 'vue'

// 可以抽取为 composable
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() { count.value++ }

// 复用：抽成 composable
// const { count, double, increment } = useCounter()
</script>