Vue3 组合式API vs 选项式API：深度对比与最佳实践

Hi，我是布兰妮甜 ！Vue 3 引入了组合式API（Composition API）作为对传统选项式API（Options API）的补充和增强，许多开发者对两者之间的差异、适用场景以及如何选择感到困惑。本文将从核心概念、代码风格、优缺点、适用场景及高级用法等方面进行全面对比，帮助你理解何时使用选项式API，何时采用组合式API，并提供实际项目中的最佳实践建议。

---

---

一、什么是选项式API（Options API）？

选项式API是Vue 2.x 的主要编程范式，通过定义不同的选项（如 data、methods、computed、watch、lifecycle hooks）来组织代码。

示例代码（Options API）

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
export default {data() {return {count: 0}},methods: {increment() {this.count++}},computed: {doubleCount() {return this.count * 2}},watch: {count(newVal) {console.log(`Count changed to ${newVal}`)}},mounted() {console.log('Component mounted')}
}
</script>

特点

• 结构清晰：代码按功能分类（data、methods、computed 等），适合新手理解。
• 逻辑分散但直观：每个选项只关注自己的职责（如 methods 只存放方法）。
• 逻辑复用困难：如果多个组件共享相同逻辑，需要使用 mixins 或 scoped slots，容易导致命名冲突。
• 大组件代码臃肿：随着组件复杂度增加，data、methods 等选项会变得很长，难以维护。

二、什么是组合式API（Composition API）？

组合式API 是 Vue 3 引入的新特性，允许开发者使用 setup() 函数和 响应式API（如 ref、reactive、computed、watch） 来组织代码，使逻辑更灵活、可复用。

示例代码（Composition API）

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref, computed, watch, onMounted } from 'vue'export default {setup() {const count = ref(0)const increment = () => {count.value++}const doubleCount = computed(() => count.value * 2)watch(count, (newVal) => {console.log(`Count changed to ${newVal}`)})onMounted(() => {console.log('Component mounted')})return {count,increment,doubleCount}}
}
</script>

特点

• 逻辑复用更简单：可以使用 composables（类似 React Hooks）封装逻辑，避免 mixins 的缺点。
• 更好的 TypeScript 支持：变量和函数类型更容易推断。
• 代码组织更灵活：可以按功能（而不是选项）组织代码，提高可维护性。
• 学习曲线稍高：需要理解 ref、reactive、watch 等新概念。
• setup() 函数内代码可能变长：需要合理拆分逻辑，否则可能变得混乱。

三、组合式API vs 选项式API 详细对比

特性	选项式API (Options API)	组合式API (Composition API)
代码组织方式	按选项（data, methods 等）分类	按逻辑功能组织（setup() 函数内）
逻辑复用	使用 mixins（易冲突）	使用 composables（更灵活）
TypeScript 支持	一般（类型推断较弱）	优秀（类型推断更准确）
代码可读性	直观，适合简单组件	更灵活，适合复杂逻辑
响应式数据管理	自动响应式（this.xxx）	手动声明（ref() / reactive()）
生命周期钩子	mounted(), created() 等	onMounted(), onCreated() 等
适用场景	小型项目、简单组件	大型项目、复杂逻辑、逻辑复用需求高

四、何时使用选项式API？何时使用组合式API？

适合使用选项式API的场景

• 小型项目或简单组件
• 团队对 Vue 2 更熟悉，暂时不想迁移
• 需要快速开发，不需要复杂逻辑复用

适合使用组合式API的场景

• 大型项目，需要更好的代码组织
• 需要逻辑复用（如多个组件共享相同逻辑）
• 使用 TypeScript，希望更好的类型推断
• 需要更灵活的状态管理（如结合 Pinia）

五、组合式API 进阶技巧

（1）使用 composables 封装可复用逻辑

// useCounter.js
import { ref, computed } from 'vue'export function useCounter() {const count = ref(0)const increment = () => count.value++const doubleCount = computed(() => count.value * 2)return { count, increment, doubleCount }
}// 在组件中使用
import { useCounter } from './useCounter'export default {setup() {const { count, increment, doubleCount } = useCounter()return { count, increment, doubleCount }}
}

（2）<script setup> 语法糖（更简洁的写法）

<template><div><p>{{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { ref } from 'vue'const count = ref(0)
const increment = () => count.value++
</script>

（3）结合 Pinia（Vue 官方状态管理）

import { useStore } from './store'export default {setup() {const store = useStore()return { store }}
}

总结

Vue 3 的组合式API 和 选项式API 各有优势，选择取决于项目需求和团队习惯。选项式API 适合简单组件和初学者，结构清晰但逻辑复用困难；组合式API 更适合复杂应用，提供更好的逻辑封装、TypeScript 支持和代码组织。对于新项目，推荐尝试组合式API，尤其是需要逻辑复用或使用 TypeScript 的场景；而现有 Vue 2 项目可以逐步迁移。无论选择哪种方式，Vue 3 都提供了灵活的选项，让开发者能够高效构建现代化前端应用。