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

选项式 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 的优势

1. 逻辑复用
   通过自定义 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 };
     },
   };

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

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

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

---

6. 何时使用哪种 API？

• 选项式 API

  • 适合初学者或简单组件。

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

• 组合式 API

  • 需要逻辑复用或提取。

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

  • 使用 TypeScript 开发。

---

7. 总结

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

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

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