Vue 3 Composition API

在本文中，我们假设您了解 Vue 3 的基础知识。在引用的文章中，解释了从 Vue 2 到 Vue 3  的主要更改，以及理解组合 API 函数的基础。后者将是本文的主要主题：Vue 3 组合 API。

Vue 3 组合 API

从 Vue 2 到 Vue 3 的变化为开发人员在组装组件逻辑时提供了几种选择。我们可以继续使用在 Vue 2 中使用的 Options API，或者使用 组合 API。

组合 API 的优势

主要优势是能够提取逻辑并在不同组件中重用，使我们的代码更加模块化和易于维护。因此，我们避免了使用 mixins，在 Vue 2 中是重用逻辑的方式。

如果我们继续讨论组织，使用 Options API，我们会发现每个组件负责许多责任，这将被迫分成代码的不同部分。这迫使我们在文件有数百行时上下滚动，使其变得比应该更复杂。因此，尽管可能需要多花一些功夫来提取可重用的逻辑部分，但我们会看到结果更加清洁和整洁，我们可以在下图中看到：

另一个重要的优势是它允许使用 函数式编程，而不像 Options API 是 面向对象。

使用组合 API 编写的代码比 Options API 代码更高效、可修改，因此 bundle 大小将更小。这是因为在我们的 <script setup> 中的 template 被编译为同一代码范围内的 inline function。与 this 属性不同，编译后的代码可以直接访问变量而无需代理。由于这一点，它有助于我们减轻负担，因为可以使用简化的变量名。

新 API 允许您充分利用 Javascript 来定义我们组件的行为，async/await, promises 以及简化使用第三方库如 RxJS 等。

组合 API 的缺点

主要缺点是它迫使开发人员学习新的语法和代码组织方式。对于习惯于 Options API 的人来说，这可能具有一定的学习曲线。但是，它设计为简单易学，因此学习曲线应该很快。

初步步骤

模板：

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Options API：

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

组合 API：

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}

onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

与 React Hooks 的比较

与 React Hooks 相比，逻辑上是相同的，但有一些差异。

React Hooks：

• 每当组件更新时，都会调用 Hooks。
• 在 hook 闭包中声明的变量可能会变得过时，如果不传递正确的依赖项。
• 必须使用 useMemo 进行重度计算，这将要求我们手动传递依赖项。
• 传递给次要组件的 Event handlers 会默认导致不必要的代码更新。忽视这一点会导致过度更新，从而影响性能。

Vue 组合 API：

• setup() 或 <script setup> 代码仅会被调用一次。
• Vue 的 runtime 反应性系统会提取出反应式依赖项，因此我们不需要手动声明它们。
• 无需手动控制 callback 函数来更新子组件。Vue 确保只有在真正需要更新时才更新组件。

即使如此，React Hooks 仍然是组合 API 设计的主要灵感来源，但是试图解决上述提到的问题。

常见问题

Options API 是否会被弃用？

不会，它并不打算被弃用，它是 Vue 的一部分，有许多开发人员喜欢使用它。此外，组合 API 的许多益处只能在大型项目中感受到，因此 Options API 仍然是小型和中型项目的不错选择。

我可以同时使用两种 API 吗？

是的，您可以在 Options API 中使用 setup() 方法来使用组合 API。但是，仅当您的代码是 Options API，并且您需要集成一些使用组合 API 编写的库时才建议使用。

组合 API 是否与 Vue 2 兼容？

不兼容，您必须升级您的项目到 Vue 3 才能使用组合 API。

结论

总之，两种 API 都适用于 Vue 组件的逻辑。组合 API 为我们提供了一种功能性和可重用的组织代码方式，而 Options API 为我们提供了传统解决方案：面向对象。但是，如果您想要更好的性能和代码可读性，并且您正在进行大型项目，您的选择应该是组合 API。