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

在Vue的世界里，选项式和组合式是两种不同的开发模式，它们各有特点,下面就来详细说说它们的区别。

代码组织形式

选项式（Options API）是Vue 2中常用的方式，它把data、methods、computed、watch等属性都放在一个对象里,按照不同的选项来组织代码。

```javascript export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } }, computed: { doubleCount() { return this.count * 2; } }, watch: { count(newVal, oldVal) { console.log('count changed', newVal, oldVal); } } }; ```

这种方式对于小型项目或者刚接触Vue的开发者来说，比较容易理解,因为每个选项的职责相对清晰。

而组合式（Composition API）是Vue 3推出的，它通过函数来组织代码，比如使用`setup`函数，可以把相关的逻辑组合在一起，不管是数据、方法还是计算属性等。

```javascript import { ref, computed, watch } from 'vue';

export default { setup() { const count = ref(0); const increment = () => { count.value++; }; const doubleCount = computed(() => count.value * 2); watch(count, (newVal, oldVal) => { console.log('count changed', newVal, oldVal); });

return {
  count,
  increment,
  doubleCount
};

<p>组合式更灵活，对于大型项目，当逻辑变得复杂时，能更好地组织和复用代码。</p>
## 二、逻辑复用
<p>在选项式中，逻辑复用主要通过`mixins`，比如有多个组件都有类似的计数逻辑，就可以创建一个`mixin`对象，包含相关的data、methods等，然后在组件中混入，但`mixins`有个问题，就是当多个`mixins`有同名属性时，会出现命名冲突，而且不太容易看出混入的逻辑来源。</p>
<p>组合式则通过自定义钩子函数（Custom Hooks）来实现逻辑复用，比如把上面的计数逻辑封装成一个钩子函数：</p>
```javascript
import { ref, computed, watch } from 'vue';
export function useCount() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  const doubleCount = computed(() => count.value * 2);
  watch(count, (newVal, oldVal) => {
    console.log('count changed', newVal, oldVal);
  });
  return {
    count,
    increment,
    doubleCount
  };
}

然后在组件中使用：

```javascript import { useCount } from './useCount';

export default { setup() { const { count, increment, doubleCount } = useCount(); return { count, increment, doubleCount }; } };

<p>这样复用逻辑更清晰，也不会有命名冲突的问题。</p>
## 三、响应式原理
<p>选项式中，Vue 2是通过`Object.defineProperty`来实现数据响应式的，它对对象的属性进行劫持，当属性被访问或修改时，通知视图更新，但这种方式有一些局限性，比如对于数组的一些方法（如`push`、`pop`等），需要特殊处理才能实现响应式。</p>
<p>组合式在Vue 3中，使用了`Proxy`来实现响应式，`Proxy`可以代理整个对象，包括数组的方法，不需要特殊处理就能实现响应式，Proxy`的性能在一些场景下比`Object.defineProperty`更好，尤其是对于深层嵌套对象的响应式处理。</p>
## 四、学习曲线
<p>对于新手来说，选项式可能更容易上手，因为它的代码结构比较直观，每个选项都有明确的作用，比如看到`data`就知道是存放数据的，`methods`是方法。</p>
<p>而组合式需要理解`setup`函数、`ref`、`reactive`等概念，以及如何通过函数来组织逻辑，一开始可能会觉得有点抽象，但一旦掌握了，对于复杂逻辑的处理会更加得心应手。</p>
## 五、适用场景
<p>如果是小型项目，逻辑比较简单，选项式完全可以胜任，开发速度可能也不慢。</p>
<p>但如果是大型项目，有很多复杂的逻辑需要复用和维护，组合式就更有优势，它能让代码更清晰、更易于维护和扩展。</p>
<p>Vue的选项式和组合式各有千秋，开发者可以根据项目的规模、复杂度以及自己的熟悉程度来选择合适的模式，随着Vue 3的推广，组合式越来越受到青睐，但选项式在一些旧项目或者简单场景中也还有它的价值，了解它们的区别，能帮助我们在Vue开发中做出更合适的技术决策。</p>