Vue.js组件化开发的核心是拆解界面为独立可复用单元，遵循单一职责、状态隔离、可配置性与分层复用原则，通过props/events通信、scoped样式隔离及组合式函数抽离逻辑实现高内聚低耦合。
Vue.js 组件化开发的核心思想是把用户界面拆解为独立、可复用、自包含的功能单元——每个组件封装自己的模板、逻辑和样式，通过明确的接口（如 props 和 events）与其他组件协作，从而实现“数据驱动视图”的声明式开发体验。
单一职责：一个组件只做一件事
这是组件设计的基石。组件不应承担多个不相关的功能，比如商品列表组件不该同时处理订单提交逻辑，而应把下单动作交给独立的“加入购物车”按钮组件。这种分离让代码更易定位问题、测试和替换。
- 判断标准：如果删掉某个功能后组件仍能正常运行且语义完整，说明它可能已超出职责范围
- 典型反例：把表单验证、API调用、错误提示、成功跳转全塞进一个
LoginForm里 - 推荐做法：将验证逻辑抽成
useFormValidation组合式函数，API调用封装为useLogin，再由父组件组装
状态隔离与数据单向流动
组件内部状态应默认私有，外部仅通过 props 输入、events 输出。这避免了隐式依赖和状态污染，也使组件行为更可预测。
- props 是只读的，子组件不得直接修改；如需响应式更新，应触发事件由父组件决定是否变更
- scoped 样式天然支持样式隔离，防止 CSS 全局冲突
- 深层嵌套通信可用
provide/inject，但仅限于“提供配置或上下文”，而非传递业务状态
可配置性与扩展性优先
好组件不是写死的，而是留出合理定制入口：清晰的 props 默认值、类型校验、插槽（slot）支持、以及事件命名规范。
- props 应带
default和validator，比如按钮组件限制type只能是'primary'、'danger'等预设值 - 使用具名插槽区分内容区域，例如
- 事件名统一小写 + 连字符（如
item-click），避免与原生事件冲突
分层复用：从基础到业务的组件体系
项目中组件不是平铺直列，而是按抽象程度分层组织：
- 基础组件（原子级）：Button、Input、Modal，无业务逻辑，强通用性，通常提取为内部 UI 库
- 业务组件（分子级）：OrderCard、ProductFilter，封装特定业务规则，可在多个页面复用
- 页面组件（有机体级）：HomeView、UserProfile，负责路由匹配与组件编排，一般不对外暴露接口
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
