Vue 3 页面写到一定规模后，最常见的问题不是“组件不够多”，而是状态、请求、表单、弹窗和表格列混在一起。拆分组件的目标不是追求目录漂亮，而是让页面更容易理解和维护。
页面组件负责业务编排
页面层适合处理路由参数、权限判断、数据请求、状态流转和整体布局。它知道这个页面为什么存在，也知道多个子组件之间如何协作。
如果页面里同时出现大段表单配置、表格列配置、弹窗逻辑和重复按钮组，就可以考虑拆出去。但拆出去的组件要有明确输入输出，不能只是把代码搬到另一个文件。
业务组件负责稳定片段
搜索栏、编辑弹窗、状态标签、详情区块、批量操作栏都可以成为业务组件。它们通常绑定某个业务域，不一定跨项目复用，但能让页面主线更清晰。
业务组件的 props 要表达业务语义，事件也要稳定。比如 submit、cancel、refresh 比暴露内部按钮点击细节更适合协作。
通用组件不要过早抽象
真正通用的组件应该跨多个页面反复出现，并且交互规则稳定。不要因为两个页面都有一个输入框，就急着抽成万能组件。过早抽象会制造大量配置项，最后比重复代码更难读。
如果只是样式重复，先用设计变量、类名或局部封装解决；如果交互和状态也重复，再考虑通用组件。
组合式函数承载逻辑复用
请求分页、表单校验、选择状态、弹窗开关、轮询任务等逻辑，可以用 composable 抽离。这样 UI 结构留在组件里，状态逻辑有单独测试和复用空间。
Vue 3 组件拆分的好边界，是页面能看清业务流程，组件能表达稳定交互，逻辑复用不绑死 UI。拆分服务理解，而不是服务文件数量。
正文完
