用Setup抽离逻辑，组件代码减半实战指南

本文深入探讨了如何通过合理使用 Vue 的 setup 语法抽离业务逻辑，核心在于将重复、可复用且与 UI 解耦的功能（如分页、表单校验、表格选中管理等）封装为职责单一、按业务域命名的组合式函数（Composable），再借助 provide/inject 实现跨层级状态共享，最终让组件的 setup 部分精简为纯粹的“胶水代码”——仅负责调用、解构和轻量适配，从而实现组件代码减半、可维护性跃升、测试调试更聚焦，真正让逻辑复用落地为团队提效的日常实践。

用 setup 抽离业务逻辑，核心不是写得更“高级”，而是把组件中重复、可复用、与 UI 解耦的部分拎出来——变成独立的函数（即 组合式函数 / Composable），让 setup 内部只剩“连接”和“声明”，大幅降低维护成本。

把状态和方法打包成可复用的函数

比如分页、表单校验、搜索过滤这类功能，在多个组件里反复出现。与其每次都在 setup 里手写 ref、computed、onMounted，不如封装成函数：

• 新建 usePagination.js，接收总条数、每页数量，返回 current、pageSize、total、pageCount、changePage 等
• 在组件中直接解构使用：const { current, changePage } = usePagination(100, 10)
• 逻辑完全隔离，测试、复用、调试都只关注这一个函数，不污染组件

用 provide/inject 跨多层共享逻辑实例

当一组组件共用同一套状态和行为（如表格的选中管理、弹窗的全局控制），避免层层 props 透传：

• 在父组件 setup 中调用 useTableSelection()，得到 selectionState 和 methods
• 用 provide('tableSelection', selectionState) 注入
• 子组件用 inject('tableSelection') 拿到响应式数据，无需重复定义

按业务域组织组合函数，而非技术类型

别再建 useApi.js、useForm.js 这种泛泛的文件夹。按真实业务切分：

• useOrderList.js：封装订单列表的加载、搜索、导出、状态筛选
• useProductEditor.js：聚合商品编辑的表单验证、富文本处理、图片上传、库存联动
• 每个组合函数专注一个业务场景，职责清晰，命名直白，新人一眼看懂能干啥

setup 内只留“胶水代码”，拒绝二次加工

抽离后，组件 setup 应该像一份简洁的“配置清单”：

• 只调用组合函数，解构需要的变量和方法
• 只做极少量 UI 相关的适配（例如把 useOrderList 的 loading 映射为按钮 loading 状态）
• 不加计算属性、不写副作用逻辑、不手动监听 —— 那些都该在组合函数内部完成

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《用Setup抽离逻辑，组件代码减半实战指南》文章吧，也可关注golang学习网公众号了解相关技术文章。