在 Vue 开发中，你认为组件设计应该遵循哪些核心原则？请结合你的实际经验，阐述这些原则如何指导组件的划分、职责分配和复用性优化。
考察说明
考查候选人对于 Vue 组件化设计理念的理解深度，以及能否将原则应用于实际开发。
回答思路
- 【回答框架 1】组件设计的第一性原则是单一职责，即每个组件应只关注一个功能点，通过 props 接收输入，通过 events 向上传递输出。这有助于降低复杂度，提高可维护性。
- 【回答框架 2】其次是高内聚低耦合，组件内部相关的逻辑、样式和模板应紧密聚合，同时尽量减少对外部状态的依赖，通过明确的接口进行通信，便于独立开发和测试。
- 【回答框架 3】再则是可复用性设计，通用功能应抽取为公共组件，避免重复开发；组件需要提供清晰的 props 默认值和类型校验，并通过插槽或作用域插槽来增强其灵活性。
- 【回答框架 4】此外，还需要考虑组件的层级结构，遵循自上而下的数据流，避免跨级或复杂的状态同步，必要时引入状态管理工具（如 Vuex）来管理共享状态，但应避免过度使用。
- 【回答框架 5】最后，组件的命名和目录组织也应该遵循一定的规范，例如使用特定前缀区分业务组件和通用组件，这样能提高项目整体的可读性和协作效率。
- 【关键点 1】单一职责原则：组件只负责一个业务或功能单元。
- 【关键点 2】高内聚低耦合：内部要素聚集，对外通过接口交互。
- 【关键点 3】可复用性：通过抽离通用组件、规范化 props 和插槽设计实现。
- 【关键点 4】单向数据流：遵循自上而下的数据传递，避免反向直接修改。
- 【关键点 5】组件规范：统一命名和目录结构，提升协作效率。
- 【易错点 1】避免过度抽取，导致组件粒度太碎，增加维护成本。
- 【易错点 2】避免通过 ref 逃逸单向数据流，直接操作子组件内部状态。
- 【易错点 3】避免在组件内部直接修改传入的对象或数组类型的 props，应复制或触发事件。