高内聚低耦合是组件可维护、可复用、可协作的底层逻辑：高内聚要求组件职责单一，避免“和”“或”混杂；低耦合强调接口通信，禁用直接依赖；三层边界（页面/业务/基础组件）按职责分层，拆分以复用性为尺。
高内聚低耦合不是口号，是让组件真正可维护、可复用、可协作的底层逻辑。核心就两点：组件内部功能要“拧成一股绳”，组件之间联系要“松到只靠接口说话”。
高内聚：一个组件只干好一件事
判断标准很直接：如果描述这个组件时用了“和”“或”“同时”，大概率它该拆了。比如“用户卡片+编辑表单+权限校验”混在一个组件里，就是典型的职责过载。
- 把展示逻辑（头像、昵称、状态）收进 UserCard 组件，只接收
user对象作为唯一 prop - 把编辑行为单独抽成 UserEditor，由父级控制显隐，编辑完成后再 emit 提交事件
- 权限判断不写在组件里，而是通过 prop 传入
canEdit: boolean，让业务层决定权责
低耦合：组件之间只靠明确契约通信
避免直接修改对方数据、不依赖全局状态、不跨层级调用方法。通信必须有边界、可追溯、可替换。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 父子通信走 props + emits：子组件只响应 props 变化，所有意图都通过 emits 向上抛
- 跨层级或兄弟通信用 事件总线（mitt）或 provide/inject，但仅限于稳定、低频、非核心逻辑（如主题切换）
- 绝对不用
this.$parent.xxx或直接 import 其他组件实例去调方法——这等于把两个组件焊死在一起
三层组件边界必须清晰
不是为拆而拆，而是按职责分层，每层解决一类问题。
立即学习“前端免费学习笔记（深入）”；
- 页面组件（Page）：对应路由，只做调度。负责拉取初始数据、组织业务组件、处理路由参数，模板里几乎不写具体 UI
- 业务组件（Feature）：封装领域逻辑。比如 OrderList 负责订单筛选、分页、状态流转，但它不关心按钮长什么样
- 基础组件（UI）：纯视觉与交互。比如 BaseButton 只管尺寸、颜色、加载态，不掺杂任何业务语义
拆分粒度：以复用性和心智负担为尺子
太粗——难复用、难测试；太细——嵌套深、传参多、调试累。关键看是否满足“被不同场景重复使用”这个硬指标。
- 一个搜索框，如果只在订单页用，且带订单专属过滤逻辑，就属于业务组件 OrderSearchBar
- 如果多个页面都要输入关键词、支持清空、防抖，那就升级为基础组件 BaseSearchInput，用 slot 或 scoped slot 扩展右侧图标
- 连 loading 图标都单独抽成 IconLoading？没必要——它只是 BaseButton 的一部分，属于实现细节，不是独立职责
