第二十七节——组合式API介绍

一、什么是组合式API

组合式API(Composition API)是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue组件。它是一个概括性的术语，涵盖了以下方面的 API:

1、响应式API

例如 ref()和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。

2、生命周期钩子

例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。

3、依赖注入

例如 provide() 和 inject()，使我们可以在使用响应式API时，利用Vue的依赖注入系统。

4、总结

组合式API是Vue 3及 Vue 2.7 的内置功能。对于更老的 Vue 2版本，可以使用官方维护的插件@vue/composition-api 。在Vue3中，组合式API基本上都会配合语法在单文件组件中使用.

二、为什么使用它

1、更好的逻辑复用

组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。在选项式 API中我们主要的逻辑复用机制是 mixins，而组合式 API 解决了 mixins 的所有缺陷。

组合式 API提供的逻辑复用能力孵化了一些非常棒的社区项目，比如 VueUse，一个不断成长的工具型组合式函数集合。组合式 API 还为其他第三方状态管理库与 Vue 的响应式系统之间的集成提供了一套简洁清晰的机制，例如 RxJS。

2、更灵活的代码组织

许多用户喜欢选项式 API 的原因是因为它在默认情况下就能够让人写出有组织的代码:大部分代码都自然地被放进了对应的选项里。然而，选项式 API 在单个组件的逻辑复杂到一定程度时，会面临一些无法忽视的限制。这些限制主要体现在需要处理多个逻辑关注点的组件中，这是我们在许多 Vue 2 的实际案例中所观察到的。

3、更好的类型推导

近几年来，越来越多的开发者开始使用 TypeScript 书写更健壮可靠的代码，TypeScript还提供了非常好的IDE开发支持。然而选项式 API是在 2013 年被设计出来的，那时并没有把类型推导考虑进去，因此我们不得不做了一些复杂到夸张的类型体操才实现了对选项式 API的类型推导。但尽管做了这么多的努力，选项式 API 的类型推导在处理 mixins 和依赖注入类型时依然不甚理想。

因此，很多想要搭配TS 使用Vue 的开发者采用了由 vue-class-component 提供的 class APl。然而基于 class 的API非常依赖ES 装饰器，在2019年我们开始开发 Vue 3时，它仍是一个仅处于 stage2的语言功能。我们认为基于一个不稳定的语言提案去设计框架的核心API 风险实在太大了，因此没有继续向 Class API 的方向发展。在那之后装饰器提案果然又发生了很大的变动，在 2022 年才终于到达 stage3。另一个问题是，基于 class 的 API和选项式 API 在逻辑复用和代码组织方面存在相同的限制。

相比之下，组合式 API 主要利用基本的变量和函数，它们本身就是类型友好的。用组合式 API 重写的代码可以享受到完整的类型推导，不需要书写太多类型标注。大多数时候，用TypeScript 书写的组合式 AP代码和用 JavaScript写都差不太多!这也让许多纯 JavaScript 用户也能从IDE 中享受到部分类型推导功能。

4、更小的生产包体积

搭配 <script setup>使用组合式 API比等价情况下的选项式API更高效，对代码压缩也更友好。这是由于 <script setup> 形式书写的组件模板被编译为了一个内联函数，和 <script setup>中的代码位于同一作用域。不像选项式 API需要依赖 this 上下文对象访问属性，被编译的模板可以直接访中定义的变量，无需一个代码实例从中代理。这对代码压缩更友好，因为本地变问 <script setup>量的名字可以被压缩，但对象的属性名则不能。

三、简单例子

复制代码

<template>
  <div>
    {{ num }}
    <button @click="add">+1</button>
  </div>
</template>
<script setup>
  import { ref } from 'vue'

  const num = ref(1)

  const add = () => {
    num.value += 1
  }

</script>