Vue.js 中的选项模式（Options API）和组合模式（Composition API）主要区别

Vue.js 中的选项模式（Options API）和组合模式（Composition API）是两种不同的代码组织方式，主要区别如下：

1. 代码组织方式

• 选项模式：
  通过固定的选项（如 data、methods、computed、watch 等）组织代码，逻辑分散在不同的选项中。
  示例：

  export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
  };

• 组合模式：
  通过 setup 函数组织代码，逻辑可以按功能集中编写，更灵活。
  示例：

  import { ref } from 'vue';
  export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
  };

2. 逻辑复用

• 选项模式：
  逻辑复用通常通过 mixins 或高阶组件实现，容易导致命名冲突和代码难以维护。

• 组合模式：
  通过自定义组合函数（Composable）实现逻辑复用，更清晰且易于维护。
  示例：

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

3. 类型支持

• 选项模式：
  对 TypeScript 的支持较弱，类型推断不够直观。

• 组合模式：
  对 TypeScript 支持更好，类型推断更清晰。

4. 适用场景

• 选项模式：
  适合简单场景或小型项目，学习成本低。

• 组合模式：
  适合复杂场景或大型项目，逻辑组织更灵活，易于维护和扩展。

总结

• 选项模式：简单直观，适合初学者或小型项目。
• 组合模式：灵活高效，适合复杂逻辑和大型项目，尤其是需要逻辑复用的场景。

根据项目需求和个人偏好选择合适的模式即可。