Vue3-composition
在 Vue3 中，Composition API 是一个革命性的变化，相比于 Vue2 中的 Options API，Composition API 带来了许多优点。下面我们将深入探讨 Composition API 的原理和优势。
Options API
Options API 是 Vue2 中的经典 API，通过定义 methods、computed、watch、data 等属性与方法，共同处理页面逻辑。例如，在 Options API 中，我们可以通过定义 data 属性来存储组件的状态，通过 methods 属性来定义组件的方法。然而，当组件变得复杂时，Options API 就会变得难以阅读和理解。
Composition API
Composition API 是 Vue3 中的新兴 API，它解决了 Options API 的一些问题。Composition API 将组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起。这样，在项目变得很大、功能很多的情况下，我们都能快速地定位到这个功能所用到的所有 API。
逻辑组织
Composition API 在逻辑组织方面有很大的优势。例如，在 Options API 中，我们需要不断地“跳转”相关代码的选项块来处理单个逻辑关注点，而 Composition API 正是解决了这个问题，将某个逻辑关注点相关的代码全都放在一个函数里。这样，当需要修改一个功能时，就不再需要在文件中跳来跳去。
逻辑复用
Composition API 也解决了 Options API 中的逻辑复用问题。在 Vue2 中，我们使用 mixin 来复用相同的逻辑，而 Composition API 则提供了更加灵活的方式来复用逻辑。例如，我们可以使用 Composition API 来定义一个函数，然后在组件中使用该函数来实现逻辑复用。
对比
下面是 Composition API 和 Options API 的对比：
| | Composition API | Options API |
| --- | --- | --- |
| 逻辑组织 | 将逻辑关注点相关的代码放在一起 | 需要不断地“跳转”相关代码的选项块 |
| 逻辑复用 | 提供了灵活的方式来复用逻辑 | 使用 mixin 来复用相同的逻辑 |
Composition API 是 Vue3 中的一项重要革新，它解决了 Options API 中的一些问题，提供了更加灵活和高效的方式来组织逻辑和复用逻辑。
