vue解构平铺VS对象包裹

composable（useXxx）：函数内部存在 ref/reactive Vue 响应式 API，返回一个对象，把所有状态和方法打包进去，方便统一接收。

解构平铺

复制代码

export function useTableSearch(initQuery, apiFun) {
  const queryParams = reactive({ ...initQuery })
  const tableData = ref([])
  const total = ref(0)

  const getList = async () => {
    const res = await apiFun(queryParams)
    tableData.value = res.data.records
    total.value = res.data.total
  }

  const resetQuery = () => {
    Object.assign(queryParams, initQuery)
    queryParams.pageNum = 1
    getList()
  }

  return {
    queryParams,
    tableData,
    total,
    getList,
    resetQuery
  }
}

组件使用：

复制代码

const { queryParams, tableData, total, getList, resetQuery } = useTableSearch({}, getListApi)

对象包裹

复制代码

import { reactive, ref } from 'vue'

export function useTableSearch(initQuery, apiFun) {
  const queryParams = reactive({ ...initQuery })
  const tableData = ref([])
  const total = ref(0)

  const getList = async () => {
    const res = await apiFun(queryParams)
    tableData.value = res.data.records
    total.value = res.data.total
  }

  const resetQuery = () => {
    Object.assign(queryParams, initQuery)
    queryParams.pageNum = 1
    getList()
  }

  // ✅ 全部打包到 table 对象里面返回
  const table = {
    queryParams,
    tableData,
    total,
    getList,
    resetQuery
  }

  return { table }
}

组件调用方式

复制代码

const { table } = useTableSearch({}, getListApi)

// 使用
table.queryParams.pageNum = 1
table.getList()
table.resetQuery()

为什么 composable 适合对象包裹，而 helper/utils 是另一种形态

composables/useXxx.js （useTableSearch）
内部有 ref/reactive，返回一个包裹对象 。
好处：

导入简单：只解构拿到 table，不用一堆变量
溯源：table.getList()，一眼知道是表格相关方法
多个 composable 共存时不会变量命名冲突（页面同时有 userTable、deptTable）

helper/xxxHelper.js
直接export default导出对象，toastHelper.showSuccess()
utils/xxxUtil.js
直接export default导出对象，treeUtil.arrayToTree()

三层规范汇总：

composable：export function useXxx(){ return { xxx } }

helper：const xxxHelper = {}; export default xxxHelper

utils：const xxxUtil = {}; export default xxxUtil

补充优化（加上 try catch 和组件卸载标记，和你之前 useTableQuery 保持一致）

复制代码

import { reactive, ref, onUnmounted } from 'vue'

export function useTableSearch(initQuery, apiFun) {
  const queryParams = reactive({ ...initQuery })
  const tableData = ref([])
  const total = ref(0)
  let isUnmount = false

  const getList = async () => {
    try {
      const res = await apiFun(queryParams)
      if (isUnmount) return
      tableData.value = res.data.records
      total.value = res.data.total
    } catch (err) {
      console.error('查询表格失败：', err)
    }
  }

  const resetQuery = () => {
    Object.assign(queryParams, initQuery)
    queryParams.pageNum = 1
    getList()
  }

  onUnmounted(() => {
    isUnmount = true
  })

  const table = {
    queryParams,
    tableData,
    total,
    getList,
    resetQuery
  }

  return { table }
}

重点区分：

✅ composable 是函数执行后返回包裹对象

✅ helper/utils 是直接导出静态对象