Vue组件设计原则
Vue 组件在职责划分、接口设计与复用边界上的常用设计原则。
#tech / dev / frame
#resource / vue3
#type / synthesis
#status / growing
[!info] related notes
Vue组件设计原则
Vue 组件写得好不好，关键不在于会不会写 API，而在于你是否把职责、接口和复用边界设计清楚了。
为什么要单独理解这一层
很多后期难维护的页面，并不是功能实现不了，而是组件承担了太多职责：请求、表单、弹窗、列表、状态全堆在一起。
几条最重要的原则
单一职责
一个组件最好只解决一类问题，不要既当页面容器，又当通用表单项，又负责复杂副作用流程。
接口清晰
组件对外暴露的 props、事件和插槽要尽量稳定、语义明确。
复用靠组合，不靠复制
优先通过 props、slot、组合小组件来复用，而不是复制一份相似模板再硬改。
状态边界明确
局部状态留在组件里，共享状态再考虑提升或交给 pinia。
一个实用判断题
如果你发现一个组件同时在做：
- 请求编排
- 表单管理
- 弹窗开关
- 列表渲染
- 权限判断
那它大概率已经该拆了。
最短记忆方式
好组件不是“功能越多越强”，而是职责越清晰越耐用。