前端开发框架从最开始的jquery时代，到后来backbone，angular1，再到现在vue和react两分天下，也才用了不到十年的光景。

最开始jquery是为了解决浏览器兼容性的问题而火起来的，准确的说它只是一个库，而不能成为框架。但随着前端页面的复杂度的增加，渐渐数据驱动和mv*的思想开始形成，有了backbone，angular等先驱。再之后随着AST，Bable，webpack等技术的兴起，一个逐渐晚上的前端框架体系也随之建立了起来，如今最入门的就是vue和react了。

但由于vue和react要解决的事情和思想非常相近，所以导致很多人在选择到底使用哪种框架进行学习和开发的时候异常头痛。这个问题还是比较难解决的，仁者见仁智者见智，目前看来不仅公司和公司之间选择不同，就连很多大厂在部门之间也存在分歧，一个公司里很多部门都在使用不同的框架。

今天我就我自己的经验来分析一下这两款框架的区别，看看你看重那个方面。

1.模板引擎：vue的视图模板采用类html的写法加上自己的指令与自定义属性组成，在多数情况下是要比react的JSX写法开发效率高和清晰的。但是在复杂场景下，类html的写法有时候很比较麻烦或者难以胜任，这个时候就凸显出JSX的语言表现力的丰富了。不过vue目前也支持jsx的写法。 

2.样式：vue的样式和模板可以写在同一个文件里，而react的主流做法还是要单写一个样式文件，虽然区别不大，但还是更喜欢能少写几个文件的感觉。另外vue的class有多种写法，sting/object/array都可以还能自动merge，体验很好。而react本身不行，需要借助类似classname的库来实现。

3.数据响应逻辑：vue使用代理/拦截的方式使得我们直接修改data就可以了，而react需要使用setState api来实现。另外由于vue的实现方式，所以vue知道我们修改了哪些东西，并且还有watch/computed等钩子公开发人员使用，而反观react就比较不人性化了，需要我们自己在业务逻辑层diff才知道。

4.配套设施：这里指的就是常用的配套库（全家桶），vue基本上是官方给了我们一个最佳实践，直接按照官方推荐的全家桶来构建我们的应用就够了，而react就比较开发，对于社区依赖更多，所以相关的配套设施需要我们自己去找去接，社区大神们的思想各不相同，所以比vue要费心。比如我要用redux还需要引个react-redux，而且居然还不支持异步，我还得引个redux-thunk，可能我还得跟redux-saga对比下，较真一点的可能还不敢人云亦云，还要亲自看看源码才行，另外明知道我是个选择困难症患者还要有个mobx来捣乱。可能当我找到自认为是最佳实践的方案的时候，项目已经黄了或者社区又出了新的方案（哭晕在厕所 =。=...）

5.性能：在vue1.0时代，vue的性能的确是比react要弱的，但进入2.0时代，vue果断借鉴了一大波react在性能方面的优化经验（这里不论这种做法怎么样啊），反正瞬间就把性能基本给拉平了。再加上react性能需要非常有经验，非常注意你自己代码的写法才能发挥的出来，比如你要配合reselect库或者对purecomponent/shouldupdate等很了解。否则你写出来的应用的性能必定是奇慢的，而vue你其实不必关注那么多，这得益于他的数据响应的内部实现。在绝大多数情况下你不需要怎么关注你的写法是否导致了很多多余的计算和渲染开销。

6.使用人群：这点是vue的说大不大说小不小的命门，vue在国外是没有react知名的，所以在国外react是一枝独秀，导致你学习vue可能无法跟世界接轨。另外一个就是不知道曾几何时，面试官有意无意的会透露出如果你只会vue，那你一定是个初学者是个low逼....一方面原因的确vue的上手难度要比react小很多，刚才也说了很多vue不需要关心这关心那，所以新手学习vue的更多。但我其实很不能理解这点！！为什么学习vue就要比学习react低人一等。为啥新手学的多的东西就不能是好东西，非的是晦涩难懂，很难掌握的东西才能凸显出你的与众不同和不凡么？我觉得这个价值观是非常的扭曲的。在我看来不说设计思想，就单说vue的实现方式我认为是要比react高级和先进的。

好了，说了真么多，我猜你可能还是不知道要选哪个框架，哈哈哈... 真是个世界性难题啊。 这么说吧，个人认为，抛开偏见，中小型项目我推荐使用vue来开发，原因很简单

1.需要考虑的事情少，
2.开发效率高，
3.比较初级的工程师也可以轻松胜任。 

而对于大型项目，还是推荐react去开发，1.你的掌控力更多。2.由于一不小心就会导致性能下降，所以会迫使你去好好组织你的代码，所以写出来的东西更规范，可维护性更高。这个对于大型项目是至关重要的。谁也不希望一个好几年写出的大型项目因为走了几个老人就无法维护了吧。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/9045