返回专题首页

Vue 专题

Options API 与 Composition API:两种组织方式怎么选

Vue 讨论里最容易被简化成“新旧之争”的主题之一,就是 Options API 和 Composition API。很多人会直接把它理解成“Vue2 写法”和“Vue3 写法”的对立,好像答案永远是新的更好。真实项目远没有这么简单。

Vue 专题第 09 篇 / 26 篇6 分钟

Vue 讨论里最容易被简化成“新旧之争”的主题之一,就是 Options API 和 Composition API。很多人会直接把它理解成“Vue2 写法”和“Vue3 写法”的对立,好像答案永远是新的更好。真实项目远没有这么简单。

真正成熟的判断应该回到一个更底层的问题:当组件复杂度上升时,你要怎样组织状态、计算、监听和业务逻辑,才能让代码可读、可拆、可复用、可迁移。

Options API 真正的优点是什么?

Options API 的最大优势,在于结构直观。你一打开一个组件,通常能很快看到:

  • data 放状态;
  • computed 放派生值;
  • methods 放行为;
  • watch 放监听;
  • 生命周期钩子放在各自位置。

这种按“类型分区”的组织方式,对初学者和中小组件特别友好。因为阅读门槛低,团队里很多人都容易快速上手。

所以不要把 Options API 简单理解成“旧”。它在简单组件和稳定存量项目里,依然有很现实的价值。

Options API 的瓶颈通常在哪里?

一旦组件开始变复杂,它最容易暴露的问题就是:同一块业务能力被拆散在多个选项区里。

比如一个“用户搜索和表格列表”逻辑,可能会同时分散在:

  • data 里的查询参数;
  • computed 里的按钮状态;
  • methods 里的查询和重置;
  • watch 里的参数变化监听;
  • 生命周期里的初次加载。

这样组件功能越多,代码就越容易按技术类型分散,而不是按业务能力聚合。长远看,这会降低可维护性和复用性。

Composition API 真正解决了什么问题?

Composition API 的核心优势,不是“写法更现代”,而是它允许你按业务能力组织代码,而不是按技术类型切块。

也就是说,你可以把某一组高度相关的逻辑放在一起,比如:

  • 分页与查询;
  • 表单校验与提交;
  • 权限判断与按钮可见性;
  • 列表选择与批量操作;
  • 请求状态与错误处理。

这对于复杂组件、可复用逻辑抽取、组合式封装都非常有价值。尤其当你开始把逻辑抽成 composable 时,Composition API 的优势会更明显。

Composition API 为什么更适合复杂项目?

因为真实项目里最难维护的,从来不是单个变量,而是一组协同工作的状态和行为。如果这些逻辑能围绕能力聚合,后续:

  • 阅读会更顺;
  • 抽取会更自然;
  • 测试会更容易聚焦;
  • 迁移和重构也更可控。

所以 Composition API 更像是一种面向复杂度的组织方式,而不是单纯的新语法集合。

那是不是以后都应该用 Composition API?

也不能这样简单下结论。更稳的判断通常是:

  • 新项目、复杂业务、需要复用逻辑时,Composition API 往往更有优势;
  • 简单组件、展示组件、稳定存量模块里,Options API 依然可以很直接;
  • 接手老项目时,优先顺着现有体系维护,不要动不动就混搭出一套没人看得懂的风格;
  • 团队统一性往往比个人偏好更重要。

也就是说,真正的问题不是“哪种 API 更高级”,而是当前模块更需要哪种组织收益。

什么样的场景更适合 Options API?

比较典型的包括:

  • 组件本身很短;
  • 状态和逻辑不多;
  • 页面以展示为主;
  • 团队长期维护的是存量 Vue2 / Vue2 风格项目;
  • 当前模块没有强烈的逻辑抽取需求。

这时继续使用 Options API,未必是落后,反而可能是更低成本、更符合现状的选择。

什么样的场景更适合 Composition API?

更典型的包括:

  • 状态和副作用较多;
  • 业务能力可以按块拆分;
  • 多个组件之间需要复用同一套逻辑;
  • 项目已经进入 Vue3 主线;
  • 团队希望统一往 composable 方向建设。

在这些场景里,Composition API 通常能明显提升组织能力。

为什么很多人“用了 Composition API”,代码反而更乱?

因为问题不在 API,而在组织思路。最常见的坏味道是:

  • 把所有变量和方法平铺在 setup 顶层;
  • 没有按能力分组;
  • 什么逻辑都不抽 composable;
  • 只是把 Options API 的分散逻辑搬了个位置。

这类写法虽然形式上是 Composition API,实质上并没有得到它真正的收益。换句话说,Composition API 不是自动提升可维护性的魔法,前提是你真的用它来组织复杂度。

混用两种 API 要注意什么?

真实项目里混用并不罕见,但最怕混得没有规则。更稳的经验通常是:

  • 存量组件保持原有风格,避免无意义重写;
  • 新增复杂逻辑时,优先保持组件内部风格一致;
  • 团队层面最好约定新项目或新模块的默认写法;
  • 避免同一组件内逻辑一半按 Options 思维,一半按 Composition 思维,导致阅读断裂。

混用本身不是罪,失去一致性才是问题。

把这个选择放回项目里,真正应该怎么判断?

你可以先问自己这几个问题:

1. 这个组件复杂度高不高?2. 逻辑更适合按“选项类型”看,还是按“业务能力”看?3. 有没有复用和抽取需求?4. 当前仓库的主流写法是什么?5. 这次选择会不会影响团队协作和后续维护成本?

只要这几件事想清楚,API 选择就不会沦为情绪化站队。

最常见的几个误区

1. 把 Options API 视为“老旧、落后”

它在很多场景下依然有成本优势。

2. 把 Composition API 视为“写法升级包”

如果不围绕能力组织逻辑,它一样会乱。

3. 只看个人偏好,不看项目一致性

这会给后续协作带来明显成本。

4. 为了迁移而迁移

如果没有明确收益,重写组件很可能只是把风险提前暴露。

总结

Options API 与 Composition API 的选择,本质上不是新旧之争,而是代码组织方式的选择。Options API 更适合简单、直观、稳定的组件结构,Composition API 更适合复杂逻辑、能力聚合和复用抽取。只要你始终围绕“组件复杂度、逻辑组织方式、项目主流风格、团队协作成本”来判断,这个选择就会更稳,而不是停留在语法偏好层。