一：是什么

1：选项式API（Options API）

Vue2.x引入的默认API，主要是通过将组件的选项组织在单个对象中来工作，

包括data、computed、methods、watch、mounted、updated 等属性

2：组合式API（Composition API）

Vue3.x引入的新API，允许将组件的逻辑相关的代码组织在一起，利用 setup 函数作为组件的入口点

包括ref、reactive、computed、watch、watchEffect 等 API 来声明响应式状态和逻辑

二：使用

1：选项式

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

2：组合式

<template>
  <div>
    <p>{{ count.value }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
}
</script>

三：优缺点

1：选项式

优点：

结构清晰，易于上手。组织代码更直观。

逻辑自然分组， Vue 的生命周期或选项进行组织。

缺点：

组件复杂度的增加，可能很难追踪数据流向和逻辑来源。

多个组件之间复用逻辑时，可能需要使用 mixin 或者高阶组件，能会导致状态管理和依赖关系的复杂性增加。

2：组合式

优点：

更好的逻辑复用。可自定义的 hook，然后在组件之间共享。

更灵活的代码组织。允许按照逻辑来组织代码。

更好的 TypeScript 支持。提供更精确的类型推断。

缺点：

需要更长的学习曲线。

需要更多的代码来达到相同的功能，特别是当使用大量响应式状态或计算属性时。

四：总结

1：新项目或想要更好地利用 Vue 3 特性的项目，使用组合式 API。

2：已经在使用 Vue 2，可以继续使用它，直到有迁移到 Vue 3 的需求。

3：对于逻辑较为简单的组件，选项式 API 。

4：当需要编写可复用的逻辑或高度依赖 TypeScript 时，组合式 API 提供了更好的支持。