Vue组件设计应遵循单一职责与接口隔离原则：一个组件只承担一个变化原因，仅暴露必要props/events；通过精准命名、合理拆分和状态外置实现可复用、易测试、低耦合。
Vue 组件设计中，单一职责和接口隔离不是理论空谈，而是直接影响开发效率与后期维护成本的关键实践。一个组件只做一件事，并且只暴露它必须暴露的输入输出，才能真正实现可复用、易测试、低耦合。
单一职责：一个组件，一个变化原因
判断一个组件是否符合单一职责，最直接的方法是问：如果需求变了，有多少种可能要改这个组件？只要答案超过一个，就说明它承担了不止一项职责。
- 比如“用户列表页”组件，既拉数据、又渲染列表、还处理搜索和分页逻辑——这其实是多个职责混在一起；应拆成 UserListDisplay（纯展示）、UserListFetcher（数据获取）、UserSearchBar（搜索交互）等独立单元
- 按钮组件不应决定跳转路由或发起 API 请求，它只响应点击并抛出事件；跳转或请求逻辑由父组件或业务层接管
- 表单组件不校验规则也不提交数据，它只收集输入值并同步给外部；校验和提交交给包裹它的容器或组合式函数处理
接口隔离：只暴露需要的 props 和 events
组件的接口（即 props、emits、slots）越精简，使用者越不容易误用，也越容易替换或升级内部实现。
- 避免定义一堆“备用但不用”的 props，例如一个图标按钮组件提供
size、theme、tooltip、disabledReason等十几个属性，实际项目只用其中 2–3 个——应按使用场景拆分成 IconBtn、TooltipIconBtn 等更细粒度组件 - 用
emits: ['click', 'update:modelValue']明确声明对外事件，而不是靠文档说明“也可能触发 error”；未声明的事件不被 TypeScript 或 Vue Devtools 识别，等于隐形依赖 - 作用域插槽（scoped slot）要限定传递的数据范围，比如
v-slot:item="{ item, index }"比v-slot:item="{ ...row }"更安全，避免子组件意外依赖父组件未声明的字段
怎么落地？从命名和拆分开始
设计时多问两句：这个组件名能不能准确说出它唯一干的事？它的所有 props 是否都服务于那件事？
立即学习“前端免费学习笔记（深入）”；
- 命名体现职责：用 DataTable 而不是 TableComponent；用 DateRangePicker 而不是 DatePicker（后者易让人误以为只选单日）
- 拆分信号明显：当组件内出现
if (type === 'user')或switch (mode)时，大概率该按类型/模式拆成多个组件 - 状态外置优先：组件自身不管理 loading/error 状态，而是接收
loadingprop 并响应@load事件；状态逻辑交由业务组件或自定义 Hook 统一控制
不追求绝对“小”，但拒绝模糊“大”
组件不是越小越好，而是边界越清晰越好。一个负责“带搜索的下拉选择器”的组件，只要搜索、过滤、选项渲染、选中反馈全部围绕“选择”这一件事展开，它就是单一职责的；但如果它同时负责保存选中结果到 localStorage、上报埋点、动态加载远程 schema——那就已经越界了。
