组件的设计原则

答：

(1) 页面上每个独立的可视/可交互区域视为一个组件

比如页面的头部、尾部、可复用的区块。每个组件专注于解决一个具体的 UI / 交互问题。

(2) 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护

组件的就近维护思想体现了前端的工程化思想，为前端开发提供了很好的分治策略。在 Vue.js 中，通过 .vue 文件将组件依赖的模板、JS、样式写在一个文件中。每个开发者清楚自己开发维护的功能单元，它的代码必然存在对应的组件目录中，在该目录下可以找到功能单元所有的内部逻辑。

(3) 页面不过是组件的容器，组件可以嵌套自由组合成完整的页面

组件树的最外层是 App.vue，内部由若干嵌套的子组件构成；父子组件之间通过 props / events / slot 通信。

补充：优秀的组件设计还应遵循：

单一职责：一个组件只做一件事。

受控 / 非受控边界清晰：明确哪些 props 由父级控制、哪些是组件内部状态。

可复用性：把通用的视觉/交互抽成通用组件（BaseButton、BaseModal 等），把业务相关的放在业务目录。

接口稳定：props 的语义、命名、类型一旦发布尽量保持向后兼容。