理解 Composition API Vue 的基础与模式

Vue 3 引入了 Composition API，为开发者提供了一种更优雅的组件编写方式。通过这种 API，开发者可以将代码的逻辑部分进行分组，从而编写出更易读的代码。

Composition API 是 Vue 3 的内置功能，并通过 @vue/composition-api 插件在 Vue 2 中可用。在 Composition API 出现之前，Vue 2 使用的是 Options API。虽然在 Vue 3 中仍然可以使用 Options API，但其缺点在于单个主题会分散在多个选项中，比如 data() 或 props、某些方法、生命周期钩子（如 mounted()、created() 等）以及监听器（watch）。

借助 Composition API，您可以将代码组织成更小的逻辑块，将它们分组，甚至在需要时重用它们。

Composition API 与 Options API 的对比

代码示例与对比

在 Options API 中，代码通常是这样的：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

而在 Composition API 中，同样的逻辑可以更清晰地分离：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++

    return {
      count,
      increment
    }
  }
}

更进一步，使用 <script setup> 语法可以简化代码：


import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++

比较结果

在 Composition API 中，代码结构更清晰，因为逻辑是分离的。这种语法是推荐的语法。

代码重用与 Composition 函数

在 Composition API 引入之前，开发者使用 mixins 来实现代码重用。Mixin 是包含一些可以在多个组件中重用的 Vue 选项的简单 JavaScript 文件。

Mixin 示例

// counterMixin.js
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

使用 Mixin 的组件

import counterMixin from './counterMixin'

export default {
  mixins: [counterMixin],
}

虽然 mixins 看起来不错，但存在一些问题：

属性名冲突：不同的 mixin 中的属性会合并到同一个组件中，可能导致冲突。
来源不明：混合多个 mixin 时，不容易辨别属性来源。
缺乏灵活性：无法向 mixin 传递参数以改变其逻辑。

Composition API 的解决方案

使用 Composition API，可以解决上述问题：

// useCounter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++

  return { count, increment }
}

在组件中使用 Composable

import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()

    return { count, increment }
  }
}

这种方法解决了 mixin 的问题：

没有属性名冲突，因为可以将方法封装在单个对象中。
清晰的属性来源，即使在组件中使用多个 composable。
可以向 composable 传递参数。

Composition API 提供了什么？

根据 Vue 官方文档，Composition API 提供了以下 API：

Reactivity API：例如 ref() 和 reactive()，允许我们直接创建响应式状态、计算状态和监听器。
生命周期钩子：例如 onMounted() 和 onUnmounted()，允许我们以编程方式挂接到组件生命周期中。
依赖注入：即 provide() 和 inject()，允许我们在使用 Reactivity API 时利用 Vue 的依赖注入系统。

Composition API 的优势

使用 Composition API 的主要优势有：

更好的逻辑重用。
更灵活的代码组织。
更好的类型接口，因为 Vue 3 是用 TypeScript 编写的。
更小的生产包和更少的开销。

Composition API 的劣势

使用 Composition API 的一些劣势包括：

许多基于 Vue 的框架（如 Nuxt 和 Vuetify）仍依赖于 Options API，并且不支持 Composition API（截至本文撰写时）。尽管这些框架有 beta 支持和第三方库来支持 Vue 3，但目前没有稳定版本。在这种情况下，最好坚持使用 Options API，因为这更有意义。
新手可能会对 ref() 和 reactive() 之间存在困惑，尤其是不知道什么时候使用它们以及它们之间的区别。
Composition API 不支持 name 和 inheritAttrs 等选项。解决方法是在使用 Options API 的新脚本标签中创建这些选项并使用它们。

TypeScript 的一流支持

如前所述，Vue 3 是用 TypeScript 编写的，并且对 TypeScript 提供了一流的支持。您可以在组件的各个部分进行类型检查，比如 props、refs、reactives、computed 和 emits。Vue 3 已经暴露了所有所需的接口，以便与 TypeScript 一起使用。

了解更多关于与 TypeScript 的使用这里。

Options API vs Composition API

下图展示了一个包含多个特性的代码库示例，组件中不同颜色用于表示不同的逻辑块。

从图中可以看出，使用 Composition API 时，代码看起来更有组织。

结论

虽然您仍然可以使用 Options API，但对于较大的代码库，最好使用 Composition API 以获得其所有优点。对于较小的项目或如果您的项目使用了 Vue 2 的依赖项（如 Nuxt、Vuetify 等），您可以使用 Options API。您甚至可以将 Options API 与 Composition API 一起使用，但尽可能坚持使用 Composition API，因为这将有助于长期发展。