Vue Composition API 实现高内聚低耦合的核心是按功能组织逻辑、显式声明依赖、隔离副作用；通过组合函数封装独立逻辑单元，组件仅保留职责明确的接口层，并借助类型约束与依赖注入强化边界。
Vue Composition API 实现高内聚低耦合，核心在于按功能组织逻辑、显式声明依赖、隔离副作用，而不是按选项（data/methods/computed）机械切分。它让“同一块业务逻辑”的代码天然聚在一起，同时通过清晰的输入输出边界，避免组件间隐式依赖。
用组合函数封装独立逻辑单元
把一组强相关的响应式状态、计算属性、事件处理和生命周期行为，封装成一个可导出的函数。这个函数只做一件事，且不依赖外部组件上下文。
- 例如表单校验逻辑：统一管理字段值、错误信息、校验触发、重置方法，返回 { value, error, validate, reset }
- 例如分页请求逻辑：封装 current、pageSize、list、loading、fetchPage、goTo，内部调用 API，但不操作 DOM 或路由
- 函数接收必要参数（如初始值、配置对象），返回解构友好的响应式对象，不修改全局或父级状态
组件内只保留职责明确的接口层
组件模板和 setup 中不写业务规则，只做“连接”和“呈现”：接收 props、调用组合函数、绑定事件、透传插槽。
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- props 仅用于配置（如 label、disabled、apiUrl），不承载复杂业务状态
- emit 仅用于通知外部关键动作（如 @change、@submit、@update:modelValue），不传递中间过程数据
- 插槽控制内容定制，比如 default 插入主体、footer 插入操作按钮，避免在组件内写 if-else 切换 UI
依赖注入与类型约束强化边界
借助 defineProps 和 defineEmits 的运行时 + 编译时校验能力，让组件契约一目了然；配合 TypeScript 接口，进一步锁定输入输出结构。
立即学习“前端免费学习笔记（深入）”；
- props 类型用 interface 或 PropType 显式定义，禁止 any 或未声明的属性访问
- 使用泛型封装组合函数（如 useApiData
），使返回值类型可推导、可约束 - 避免在组合函数中直接 import router / store / axios 实例，改为通过参数注入，便于测试与替换
避免隐式耦合的几个关键点
高内聚低耦合容易被破坏的地方，往往藏在看似方便的写法里。
- 不用 getCurrentInstance() 或访问 $parent/$root —— 这会把组件绑死在特定层级结构中
- 不在 setup 内直接调用全局 API（如 localStorage、window.scrollTo）—— 应封装进组合函数并提供 mock 能力
- 不通过 provide/inject 传递非主题性上下文（如 theme、locale 可以，但某个表单的 submitHandler 不该靠 inject 获取）
- 事件命名遵循语义化约定，比如 update:modelValue、confirm、cancel，而非 click、handleClick 等模糊动词
