Vue Academy · 课时

为什么使用 Composition API？

Q: 「为什么使用 Composition API？」这节课中我会学到什么？

Options API 的局限性、逻辑复用问题，以及 Composition API 的优势。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

Options API 的局限性、逻辑复用问题，以及 Composition API 的优势。

为什么使用 Composition API？ 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

编写 Vue 的两种方式

Vue 3 提供了两种编写组件逻辑的风格：选项式 API和组合式 API。两者最终实现的效果相同，但组织代码的方式非常不同。

了解其中的权衡，有助于您选择合适的工具，并更有信心地阅读现有代码库。

选项式 API 如何组织代码

选项式 API 将组件拆分为固定的几个部分：data、computed、methods、watch 和生命周期钩子。一个功能的各个部分会分别位于不同的区域。

对于一个小功能，您可能需要修改文件中的四个不同代码块。

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

问题：关注点变得分散

当组件不断增大时，单个关注点（例如搜索框）的逻辑会分散在 data、methods、computed 和 watch 中。为了跟踪一个功能，您需要不断上下滚动。

这被称为碎片化问题。

组合式 API：按功能分组

组合式 API 允许您将一个逻辑关注点的所有代码放在一起。响应式状态、派生值以及改变它们的函数彼此相邻。

您可以从上到下阅读代码，并在同一个位置看到一个完整的功能。

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

并列对比

请注意，第二个示例将 count、由它派生的 doubled 以及 increment 放在了一起。在选项式 API 中，这三个部分分别位于三个不同的区域。

选项式 API：按选项类型组织
组合式 API：按逻辑关注点组织

复用逻辑：混入（旧方式）

在组合式 API 之前，主要的复用工具是混入。混入会将自身的选项合并到组件中。

但混入存在实际问题：名称冲突、属性来源不明确，以及混入之间存在隐式依赖。

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

复用逻辑：组合式函数（新方式）

组合式函数就是一个使用响应式 API 并返回响应式状态的函数。您可以像调用任何函数一样调用它，因此每个值的来源都清晰明确。

没有神奇的合并，也没有隐藏的名称冲突。

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

使用组合式函数

导入并调用组合式函数后，count 和 increment 来自 useCounter 这一点会非常清楚。您甚至可以在解构时重命名它们，以避免冲突。

import { useCounter } from './useCounter'

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

为什么组合式函数优于混入

来源明确 — 每个值都来自清晰可见的函数调用。
没有名称冲突 — 可以自由解构并重命名。
可组合 — 一个组合式函数可以调用另一个组合式函数。
类型友好 — TypeScript 会自动推断返回的类型。

更好的 TypeScript 和工具支持

由于组合式 API 由普通函数和变量构成，TypeScript 无需特殊工具就能推断类型。不需要维护带有手写类型的 this，编辑器也能提供准确的自动补全。

何时使用哪一种

对于中型和大型组件，以及任何希望复用的逻辑，组合式 API 都很有优势。选项式 API 依然完全有效，对于小型组件来说也很易读。

新的 Vue 3 代码通常更倾向于使用组合式 API，尤其是配合 <script setup> 使用时，您很快就会学到这一点。

快速检查

测试您对组合式 API 存在原因的理解。

回顾

本课中，您学到了：

选项式 API 按选项类型组织代码，这会使一个功能分散在各个区域中。
组合式 API 按逻辑关注点组织代码。
混入可以复用逻辑，但会导致名称冲突和来源隐藏。
组合式函数是返回响应式状态的普通函数——来源明确、不会发生冲突，并且可以组合使用。

常见问题解答

「为什么使用 Composition API？」课时是免费的吗？

是的 — 「为什么使用 Composition API？」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「为什么使用 Composition API？」这节课中我会学到什么？

Options API 的局限性、逻辑复用问题，以及 Composition API 的优势。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「为什么使用 Composition API？」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy