选项式和组合式有什么区别

选项式 API（Options API） 和 组合式 API（Composition API） 是 Vue.js 中两种不同的组件代码组织方式。Vue2 主要使用选项式 API，而 Vue3 引入了组合式 API，提供了更灵活的逻辑组织和复用方式。以下是它们的详细对比：

---

1. 选项式 API（Options API）

选项式 API 是 Vue2 的主要编程方式，通过定义不同的选项（如 data、methods、computed 等）来组织代码。

代码结构 export default { data() { return { count: 0, }; }, methods: { increment() { this.count++; }, }, computed: { doubleCount() { return this.count * 2; }, }, mounted() { console.log('Component mounted'); }, }; 特点

代码分块：逻辑分散在 data、methods、computed 等选项中。

易于上手：适合初学者，结构清晰。

逻辑复用：通过 Mixins 实现，但可能导致命名冲突和来源不清晰。

适合简单场景：对于小型组件，选项式 API 足够直观。

---

2. 组合式 API（Composition API）

组合式 API 是 Vue3 引入的新特性，通过 setup() 函数和一系列函数（如 ref、reactive、computed 等）组织代码。

代码结构 import { ref, computed, onMounted } from 'vue'; export default { setup() { const count = ref(0); const increment = () => { count.value++; }; const doubleCount = computed(() => count.value * 2); onMounted(() => { console.log('Component mounted'); }); return { count, increment, doubleCount, }; }, }; 特点

逻辑集中：相关逻辑可以组织在一起，而不是分散在多个选项中。

逻辑复用：通过自定义 Hook（类似 React 的 Hooks）实现，复用性更强。

更好的 TypeScript 支持：组合式 API 天然支持类型推断。

适合复杂场景：对于大型组件或需要逻辑复用的场景，组合式 API 更灵活。

---

3. 主要区别 特性选项式 API（Options API）组合式 API（Composition API）代码组织按选项分块（data、methods 等）按逻辑功能组织（setup() 函数）逻辑复用通过 Mixins 实现，可能导致命名冲突通过自定义 Hook 实现，复用性更强TypeScript 支持支持较弱，需借助 Vue.extend 或装饰器天然支持，类型推断更友好适用场景简单组件，适合初学者复杂组件，适合需要逻辑复用的场景学习曲线较低较高

---

4. 示例对比 选项式 API export default { data() { return { count: 0, }; }, methods: { increment() { this.count++; }, }, computed: { doubleCount() { return this.count * 2; }, }, mounted() { console.log('Component mounted'); }, }; 组合式 API import { ref, computed, onMounted } from 'vue'; export default { setup() { const count = ref(0); const increment = () => { count.value++; }; const doubleCount = computed(() => count.value * 2); onMounted(() => { console.log('Component mounted'); }); return { count, increment, doubleCount, }; }, };

---

5. 组合式 API 的优势

逻辑复用 通过自定义 Hook，可以将逻辑提取到单独的函数中，方便复用。

// 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 }; } // Component.vue import { useCounter } from './useCounter'; export default { setup() { const { count, increment, doubleCount } = useCounter(); return { count, increment, doubleCount }; }, };

更好的 TypeScript 支持 组合式 API 天然支持类型推断，代码更健壮。

import { ref } from 'vue'; export default { setup() { const count = ref<number>(0); // 明确类型 return { count }; }, };

逻辑集中 相关逻辑可以组织在一起，而不是分散在多个选项中，代码更易维护。

---

6. 何时使用哪种 API？

选项式 API

适合初学者或简单组件。

项目规模较小，逻辑复杂度低。

组合式 API

需要逻辑复用或提取。

项目规模较大，逻辑复杂度高。

使用 TypeScript 开发。

---

7. 总结

选项式 API 是 Vue2 的主要编程方式，适合简单场景，易于上手。

组合式 API 是 Vue3 的新特性，适合复杂场景，提供更好的逻辑复用和 TypeScript 支持。

两者可以共存，Vue3 支持在同一个项目中混合使用选项式 API 和组合式 API。