近年来，随着前端技术不断更新迭代！渐渐发现前端越来越简单了，但也越来越复杂了——简单到你可以用一个Github的starter搭建一个框架，集成所有的全家桶，涵盖单元测试和功能测试，包括部署以及发布，甚至你开发时使用的UI库都让你写不了几行css；可又复杂到如此多的框架和库层出不穷，你还没来得及学会官网的文档，就已经有新的替代品了，那就更别提静下心去学习其中的源码或推敲原理了，所以学习下组件化思想而不是单单学习框架了。
为什么要说写组件化思想呢？因为我觉得它是伴随着前端发展的一个不可或缺的设计思想，目前几大流行框架也都非常好的实现了组件化，比如React，Vue。React之前用得算是比较多了，所以本篇我决定以Vue作为基础，去谈一谈前端模块化，组件化，可维护化的设计细想。
1.什么是前端组件化
组件化并不是前端所特有的，一些其他的语言或者桌面程序等，都具有组件化的先例。确切的说，只要有UI层的展示，就必定有可以组件化的地方。简单来说，组件就是将一段UI样式和其对应的功能作为独立的整体去看待，无论这个整体放在哪里去使用，它都具有一样的功能和样式，从而实现复用，这种整体化的细想就是组件化。不难看出，组件化设计就是为了增加复用性，灵活性，提高系统设计，从而提高开发效率。
2.前端组件化的演变
在前端JQ时代，大部分的前端开发都是：操作DOM，发起ajax请求，刷新数据，局部更新页面。这样的动作反反复复，甚至在同一个项目里同样的流程也许还要重复，其实jQuery本身也有有自己模块化的设计，有时我们也会用到类似jQuery UI等不错的库来减少工作量，但请注意，这里我只认为它是模块化的。
频繁操作DOM，过程式的开发方式的确不怎么样。这时开始流行MV*框架思想，比如MVC，前端开始学习后端的思想，讲业务逻辑，UI，功能，可以按照不同的文件去划分，结构清晰，设计明了，开发起来也不错。在这个基础上，又有了更加不错的MVVM框架，它的出现，更加简化了前端的操作，并且将前端的UI赋予了真实意义：你所看到的任何UI，应该都对应其相应的ViewModel，即你看到的view就是真实的数据，并且实现了双向绑定，只要UI改变，UI所对应的数据也改变，反之亦然。这的确很方便，但大部分的MVVM框架，并没有实现组件化，或者说没有很好的实现组件化，因为MVVM最大的问题就是：
1.执行效率，只要数据改变，它下面所有监测数据上绑定的UI一般都会去更新，效率很低，如果你操作频繁，很可能调了几十万遍（有可能层次太深或者监测了太多的数据变化）。
2.由于MVVM一般需要严格的ViewModel的作用域，因此大部分情况不支持多次绑定，或者只允许绑定一个根节点做为顶层DOM渲染，这就给组件化带来了困难（不能独立的去绑定部分UI）。
而后，在此基础上，一些新的前端框架“取其精华，去其糟粕”，开始大力推广前端组件化的开发方式，从这一点来说，React和Vue是类似的。
但从框架本身来说，React和Vue是完全不同的，前者是单向数据流管理设计的先驱，如果非让我做一个不恰当的比较的话，我觉得React+Redux是将MVC做到了极致（action->request, reducer->controller）；而后者则是后起之秀，既吸取了React的数据流管理方式（Vue本身也可以用类似React的方式去开发，但难度比较大而已，不是很Vue）的设计理念，也实现了MVVM的双向绑定和数据监控（这应该是Vue的核心了），所以Vue是比较灵活的，可以按需扩展，它才敢称自己是渐进式框架。至此，前端进入了组件化开发时代！
