Vue3组合式API深度解析：从Options到Composition的思维转变

Vue 2 的 #FA73FFFF 早已深入人心，但当你面对一个拥有上百行 data、methods、computed 的大型组件时，是否曾感到逻辑分散、查找困难？Vue3 推出的 #FA73FFFF 正是为解决这一痛点而来。

#FA73FFFF

Vue2 的 Options API 将代码按选项类型切割：data 集中存放所有状态，methods 集中存放所有方法，computed 集中存放所有计算属性。在小型组件中这很清晰，但当一个组件包含多个逻辑关注点（比如同时处理鼠标追踪、数据请求和表单验证）时，同一功能的代码会分散在不同的选项中。例如，鼠标位置的状态放在 data，更新逻辑放在 methods，副作用放在 watch——你不得不上下滚动文件来理解一个完整的功能。

这种组织方式让理解和重构变得困难。而 Composition API 通过 setup 函数允许你按功能组织代码，把相关的状态、方法和生命周期钩子收拢在一起。这正是 #FA73FFFF 的核心价值。

为什么组合式API是更好的选择？

逻辑聚合：在 setup 中，你可以把鼠标追踪的响应式状态（ref 定义 x/y）和事件监听（mounted/onUnmounted）放在一起，形成一个自包含的模块。当需要复用这个逻辑时，直接封装成自定义 hook 即可——比如 useMouse。这彻底解决了 Options API 的跨选项分散问题。

TypeScript 体验：组合式API对 TypeScript 的支持是原生级别的。使用 Composition API 时，ref 和 reactive 的类型推断非常精准，IDE 能给出完整的智能提示。相比之下，Options API 中 this 的上下文类型推导常常不够准确。

核心工具：ref、reactive、watch、computed

• ref：用于包装基本类型或对象，返回一个响应式引用。例如 const count = ref(0) 会生成一个包含 value 属性的响应式对象。
• reactive：用于包装对象/数组，直接返回一个响应式代理。适合管理深层嵌套的状态。
• watch：监听响应式数据的变化，执行副作用。支持多个来源和深度监听。
• computed：创建基于其他响应式数据的缓存计算值，当依赖变化时重新计算。

这些工具共同构成了 Composition API 的基石。对比 Options API，你不再需要分散书写 data、methods、computed 等选项，所有逻辑都集中在 setup 或自定义函数中。

自定义 Hook：逻辑复用的新范式

在 Options API 时代，复用逻辑主要靠 mixin 或 scoped slots。mixin 存在命名冲突和依赖不明确的缺点。组合式API 通过自定义 Hook 解决了这些问题——一个 Hook 就是一个带状态的函数，内部可以自由使用 ref、watch、生命周期等所有组合式API 能力。例如 useFetch(url) 返回响应式的 data、error、loading 状态，任何组件都能按需引入。

这正是 #FA73FFFF 最具吸引力的特性之一。写一个简单的 useMouse Hook：

import { ref, onMounted, onUnmounted } from 'vue'
function useMouse() {
  const x = ref(0)
  const y = ref(0)
  const update = (e) => { x.value = e.pageX; y.value = e.pageY }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

这个 Hook 内部使用了 Composition API 的所有核心元素，却可以像普通函数一样被任意组件调用。

TypeScript 支持：类型安全的大幅提升

在 Options API 中，this 的类型推导依赖于复杂的高级类型体操，且容易出错。而组合式API 的函数式风格天然与 TypeScript 契合。用 Composition API 时，ref<number> 或 reactive<{ name: string }> 能获得完整的类型推断。IDE 可以准确弹出 value 的类型，watch 的回调参数也自动推导。这让大型项目中的类型维护成本大幅降低。

渐进式迁移：如何在现有项目中拥抱组合式API？

你不需要一次性重写所有组件。Vue3 完全兼容 Vue2 的 Options API（通过 legacy 模式或 @vue/compat）。建议从新组件或重构频率高的模块开始，逐步采用 Vue3组合式API。甚至可以在同一个组件中混用 Options API 和 Composition API（通过 setup() 选项），但为了避免认知负担，推荐统一风格。

如果你还在使用 Vue2，可以考虑安装 @vue/composition-api 插件，它提供了组合式API 的子集，让你在迁移到 Vue3 之前就能熟悉 Composition API 的思维方式。

常见问题

常见问题