别再往 setup 里堆逻辑了：Vue3 组合式函数封装实战

最新推荐文章于 2026-08-23 15:47:42 发布

原创最新推荐文章于 2026-08-23 15:47:42 发布 · 194 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

妍思码匠的前端乐园

之前折腾过一个中后台项目，列表页写到最后有点绷不住了。

一个页面，要加载数据、要分页、要筛选、要刷新，我图省事全堆在 setup 里。刚开始还行，需求一加，几百行下去，改一处动全身。盯着屏幕发了会儿呆，决定还是得抽。

这篇记一下我把它抽成组合式函数（composable）的过程。不是什么高深玩意，但踩的坑挺真实，写出来给自己提个醒，也希望能帮到同样乱过的人。

一、先看看乱成什么样

大概长这样（简化过）：

<script setup>
import { ref, onMounted } from 'vue'
import { getUserList } from '@/api'

const list = ref([])
const loading = ref(false)
const page = ref(1)
const size = ref(10)
const total = ref(0)
const keyword = ref('')

const load = async () => {
  loading.value = true
  try {
    const res = await getUserList({ page: page.value, size: size.value, keyword: keyword.value })
    list.value = res.data.list
    total.value = res.data.total
  } finally {
    loading.value = false
  }
}

const onSearch = () => { page.value = 1; load() }
const onPageChange = (p) => { page.value = p; load() }
const onReset = () => { keyword.value = ''; page.value = 1; load() }

onMounted(load)
</script>

一个页面这样也就算了。问题是我这个项目里，这种列表页有十几个，每个都差不多，又都有点小差别。复制粘贴吧，改一个 bug 要改十几个地方；不复制吧，每个都得重写一遍。

二、思路：把"列表"这件事抽出去

组合式函数说白了，就是把一堆相关的响应式状态和操作，从组件里挪进一个 useXxx 函数。组件只管用，不管它内部怎么实现。

我抽了一个 useList：

// useList.js
import { ref } from 'vue'

export function useList(fetchFn) {
  const list = ref([])
  const loading = ref(false)
  const page = ref(1)
  const size = ref(10)
  const total = ref(0)
  const keyword = ref('')

  const load = async () => {
    loading.value = true
    try {
      const res = await fetchFn({ page: page.value, size: size.value, keyword: keyword.value })
      list.value = res.data.list
      total.value = res.data.total
    } finally {
      loading.value = false
    }
  }

  const search = () => { page.value = 1; load() }
  const reset = () => { keyword.value = ''; page.value = 1; load() }
  const pageChange = (p) => { page.value = p; load() }

  return { list, loading, page, size, total, keyword, load, search, reset, pageChange }
}

组件里就清爽多了：

<script setup>
import { onMounted } from 'vue'
import { getUserList } from '@/api'
import { useList } from './useList'

const { list, loading, total, keyword, search, reset, pageChange } = useList(getUserList)

onMounted(search)
</script>

数据怎么拿、分页怎么算，组件根本不用管，调一句 useList(getUserList) 就行。十几个列表页，每个只要一行。