zongshan

组合式函数该抽到什么程度

2026年7月5日#Vue#代码组织

Vue 3 的 composable 用起来很爽，但也很容易抽成一堆只包了一层的中间层。说说我判断「该不该抽」的几个标准。

组合式函数的好处是逻辑能像积木一样拼，坏处是——它太好抽了，于是很容易抽出一堆只转发一层的中间层。我现在用三个问题判断：

  1. 有没有状态要跨组件共享？ 有，才值得抽。
  2. 抽出来之后，调用方是不是少写了东西？ 如果只有一行 useXxx()，抽出来没意义。
  3. 换个页面还用得上吗？ 只服务一个组件的逻辑，留在组件里更好读。

一个反例

// 只是把 ref 包了一层，没有共享，也没有简化调用方
export function useTitle() {
  const title = ref('')
  return { title }
}

这种抽象除了多一个文件，什么也没解决。但如果状态需要跨组件共享，它就立刻变得有价值：

// 图片预览：卡片流和瀑布流都要用同一套状态
export function usePhotoPreview() {
  const images = useState<PreviewImage[]>('photo-preview-images', () => [])
  const current = useState<number>('photo-preview-current', () => 0)

  function open(next: PreviewImage[], startIndex = 0) {
    images.value = next
    current.value = startIndex
  }

  return { images, current, open, close, step }
}

两个视图共用同一个浮层，这时候抽出来是划算的。

顺便说个细节

useState 的 key 一定要全局唯一。我之前两个 composable 用了同一个 key，表现是「打开 A 的弹层，B 也跟着亮」——排查了十分钟才反应过来。

命名上也建议带领域前缀（photo-preview-* 而不是 images），毕竟它是一个全局的命名空间。