前端组件化：vue组件设计思想与遵从原则

组件化的工作方式信奉独立、完整、自由组合。目标就是尽可能把设计与开发中的元素独立化，使它具备完整的局部功能，通过自由组合来构成整个产品。

从页面元素的可复用性角度考虑，我们将将组件按类型分为公众组件、容器组件和视图组件。

模块(Module)通常强调的是职责（分离、内聚），组件是可复用模块和相关依赖的封装。

组件可以如下定义：

• 可复用的模块，完成既定功能
• 有明确的接口规定
• 有上下文依赖、外部依赖资源的定义
• 可以独立发布

为什么要组件化

组件化是对实现的分层，是更有效地代码组合方式

组件化是对资源的重组和优化，从而使项目资源管理更合理

组件化有利于单元测试

组件化对重构较友好

Vue组件库包含组件（Component）、指令（Directive）和过滤器（Filter）三种类型的存在。

组件多层嵌套时，应该把Modal放在根组件里，然后在子组件里通过事件触发。在具体应用里，应该这么用，这符合Vue提倡的“状态驱动”。

以下原则尽可能使用

• 层次结构和 UML 类图
• 扁平化、面向数据的 state/props
• 更加纯粹的 State 变化
• 低耦合
• 辅助代码分离
• 提炼精华
• 及时模块化
• 集中/统一的状态管理

单一职责
组件拆分目的：复用与隔离

隔离的类型，组件业务必然很重，此时虽然要保证组件尽可能简单，

复用类型的，通用性更强，所以功能越单一，使用起来就越方便。

注：引用类型的 props 千万不要直接修改对象，虽然能够达到传递数据的目的，但会产生副作用，如果有其他地方用到该数据，可能产生未知的影响。

Vue 组件之间的交互设计
Vue 组件与 React 组件有比较大的区别，模板的设计更偏向于 HTML，所以要实现类似 react 的高阶组件的需求通常比较少，

而高阶组件集成度过高，对于业务来说，当业务越来越复杂，组件内部逻辑将拆分困难，未必是件好事，所以我们只讨论普通的组件设计。

组件设计是考虑组件通讯方式，主要分为以下几个方面：数据流转(向下传值，向上传值)，伪双向绑定，方法调用。

简化与抽离的其他实现
使用插件或者 mixins 实现