Vue 2 主要使用 Options API。在 Vue 2 中，组件的逻辑被组织在不同的选项中，如data用于定义响应式数据，methods用于定义方法，computed用于定义计算属性，watch用于监听数据变化等。这种方式在小型项目中易于理解和使用，但随着项目规模的增大，当一个组件需要实现多个功能时，相关的逻辑可能会分散在不同的选项中，导致代码的可维护性和复用性降低。
Vue 3 使用 Composition API 主要有以下原因：
- 更好的逻辑复用：在 Vue 2 中，逻辑复用通常通过混入（Mixin）来实现，但混入可能会导致命名冲突和数据来源不清晰等问题。Composition API 允许将相关的逻辑封装在可复用的函数中，这些函数可以在不同的组件中被调用，从而实现更高效、更清晰的逻辑复用。例如，多个组件都需要处理数据的加载和缓存逻辑，使用 Composition API 可以将这部分逻辑提取到一个独立的函数中，然后在各个组件中按需引入，避免了代码的重复。
- 更清晰的代码结构：Composition API 以函数的方式组织代码，将组件的逻辑按照功能进行分组，使得代码的结构更加清晰易懂。在 Vue 3 的组件中，可以通过
setup函数使用 Composition API，将数据、方法、计算属性和监听等逻辑都放在setup函数内部，按照功能的相关性进行组织，而不是像 Vue 2 的 Options API 那样分散在不同的选项中。这样在阅读和维护代码时，能够更快速地找到与特定功能相关的所有代码。 - 更好的类型推导：对于使用 TypeScript 的项目，Composition API 提供了更好的类型推导支持。在 Vue 2 的 Options API 中，由于逻辑分散在多个选项中，TypeScript 在进行类型推导时可能会遇到一些困难，导致类型检查不够准确。而 Composition API 以函数为单位组织逻辑，TypeScript 能够更准确地推断出变量和函数的类型，提高代码的可读性和可维护性，减少类型相关的错误。
- 更灵活的组件组合：在构建复杂的组件系统时，Composition API 使得组件之间的组合更加灵活。可以根据需要在不同的组件中灵活地组合和复用逻辑函数，而不受限于 Vue 2 中基于选项的固定结构。这有助于构建更具扩展性和可维护性的大型应用程序。
