vue解构平铺VS对象包裹composableuseXxx函数内部存在ref/reactiveVue 响应式 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.jsuseTableSearch内部有 ref/reactive返回一个包裹对象。好处导入简单只解构拿到table不用一堆变量溯源table.getList()一眼知道是表格相关方法多个 composable 共存时不会变量命名冲突页面同时有 userTable、deptTablehelper/xxxHelper.js直接export default导出对象toastHelper.showSuccess()utils/xxxUtil.js直接export default导出对象treeUtil.arrayToTree()三层规范汇总composableexport function useXxx(){ return { xxx } }helperconst xxxHelper {}; export default xxxHelperutilsconst 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 是直接导出静态对象