前端当前最火的三大框架当属vue、react以及angular了。 但是在做项目的时候，我们怎么去选择呢？  这里做一个比较，希望大家可以有一个比较清晰的认识。

vue与react

　　vue和react是当前最火的两个前端框架，vue的发展很快，但是目前来说，react的生态系统会更强大，世界上使用这个框架的人也很多。 另外，react是facebook官方维护的， 而vue是尤雨溪本人维护的。 并且在其他周边库，如react的react-rouer和redux，是react社区在维护的。 而vue的vuex和vue-router都是尤雨溪在维护的。 

1、都在使用 Virtual DOM， 

当然，不得不说，vue的虚拟DOM一定是从react这里模仿的，但是好的东西就是需要被模仿的，而没有必要重复的造轮子，所以没毛病。使用虚拟DOM的好处就很多了，比如通过虚拟DOM结合diff算法，我们可以很好地解决DOM操作的性能问题，即 生成虚拟DOM的时间 + diff算法时间 + patch时间 < 修改DOM省下来的时间，当然，如果某一天DOM操作很快，那么就不存在这个问题了。react可能就会被其他框架取代了。 另外， 使用虚拟DOM，可以使得JavaScript的应用不仅仅局限于网页，还可以是ios、安卓等，因为在react中没有用到html，用到的时jsx，虚拟dom，最后生成的可以是用在网页上的html，也可以是用在安卓和ios的控件，所以，react-native的大火也就可想而知了。 、

2、都提供了响应式（Reactive）和组件化（Composable）的视图组件。

　　　react和vue中的组件都是核心， 是整个框架的灵魂，之前我们使用的都是以页面为基本单位的，但是却不知道组件的好处。 

　　    首先通过组件化以后，这个组件就是可复用的了，比如如果使用传统方式写一个网站，如果标题和结尾都是一样的，那我们可能会不断的复制、粘贴，但是呢，如果使用了组件化的思想，只需要写好组件，然后在需要的地方插入组件即可。 

　　    又比如vue中的单文件组件，我们写一个组件，就知道是什么含义，并且css和js都可以写在一个文件里， css通过属性 scoped 可以防止css的类名污染。 而对于template也可以放心的使用，不用担心重复的问题。

　　　基于react的UI库ant.design，我们还可以直接调用这些组件，大大地加快了前端开发的速度和效率，所以，组件的使用，绝对是前端的一小步，历史的一大步。 

3、都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

　　   即vue和react都是专注于视图的框架，只是在局部区域，vue提供了双向数据绑定，这样更有利于我们处理表单等问题，而react在这方面就有了一定的劣势。。

　　　而如果希望做大型的项目，对于vue来说，就可以使用vue-router，来构建大型网站的路由； 状态复杂，不好管了，我们就使用vuex； 所以，这也就是官网所说的渐进式的框架 了 。同样的，react也是可以直接使用的，包括react-router和redux，方便我们构建大型应用。   只是前者的周边库是由尤雨溪维护，后者是由react庞大的社区维护的。

4、vue比react更容易上手。

　　   这一点是毋庸置疑的，为什么这么说呢？ 因为对于vue，无论你是使用webpack还是broserify， vue-cli都可以很好地满足你的开发任务。

　　　学习vue，我们只需要掌握中级的html、css、js即可，在head中引入一个vue.js库，就可以直接使用了。并且对于数据双向绑定、指定等都可以很好地体现。

　　　但是react的学习会更加复杂一些，react需要有ES6的基础，因为react组件的创建多是使用es6的class来创建的，所以会更加麻烦一些，并且对于JSX语法，还是有一定的学习成本的。 

　　　因此我们说vue更容易上手。

5、 性能都很好。

　　  vue和react都采用了虚拟DOM的方式，所以在性能方面是非常地接近的，这个无需多说， 

6、vue的优化做的要比react好一些。

　　在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。 然而，使用 PureComponent 和 shouldComponentUpdate 时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。

　　而在做vue相关的项目时，我们只需要关注于业务逻辑，而不需要去操心是否会产生不必要的组件渲染，因为vue已经把这些麻烦的东西很好的解决了。 

7、vue和react同样都支持本地渲染。

　　React Native 能使你用相同的组件模型编写有本地渲染能力的 APP（iOS 和 Android）。能同时跨多平台开发，对开发者是非常棒的。相应地，Vue 和 Weex 会进行官方合作，Weex 是阿里的跨平台用户界面开发框架，Weex 的 JavaScript 框架运行时用的就是 Vue。这意味着在 Weex 的帮助下，你使用 Vue 语法开发的组件不仅仅可以运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用。

　　一句话： 你写的组件不仅可以跑在浏览器的网页上，也可以泡在安卓和ios的app里。 

8、 react更为繁荣。

　　react社区还是非常繁荣的，所以在知名度方面react也是更胜一筹，使用react和react-native的开发人员还是很多的，这也是vue需要学习和进步的地方。

9、 vue写起来更加流畅、方便， react语法更简单、扩展更强大。 

　　  在这一方面，react和vue的出发点似乎是不一样的，但是我还是比较喜欢vue的写法。 比如，对于列表循环，使用vue，直接在标签上写 v-for 即可，然后就可以直接循环了，而react需要通过一个数组的map，然后在return，在形式上来说，vue的写法还是更加舒服一点。 另外，由于vue局部的数据双向绑定，所以vue在处理表单这一块也是游刃有余，非常方便，而react仅仅是处理一个表单，就需要添加很多无关的代码，这个还是非常别扭的。 

　      可以看得出来，vue提供了更多的api，可以做更多的事情，但是， 这也体现了react的优点，即非常简单，提供的api很少，它只帮我们做了虚拟DOM的工作，其他的事情可以让我们自由的发挥，所以从这个角度来说，react还是更加简单一些的。    

10、 vue的文档更加好。

　　虽然react也有中文文档，但是vue的文档更新的更频繁，并且写的很好，我们可以很容易地学习。 毕竟大佬是中国的，还是很不错的，推荐初学者学习、使用。

 11、 无论是vue还是react我们都不需要触碰DOM。 

　　就这两者而言，我们都关心虚拟DOM，而不用去触碰DOM，这些都是vue帮助我们处理好的了。因为dom的操作是费时的，所以通过vue，我们可以很好地解决这些问题，尽可能少的减少DOM。 一般来说，对于一个项目，我们使用了vue或者是react，jquery基本上就是不需要的了。如果真的需要，看看到底哪里做的不对

 12、vue对于事件的清除优于react。 

　　在vue中，事件绑定之后，可以在组件销毁的同时事件接触绑定，无需我们自己去手动清除； 而react却不是这样的，react需要我们在 componentDidMount 的时候绑定，在 componentWillUnMount 的时候接触绑定，否则会出现问题，尤其是添加在 document 上面的事件 。 

vue与angular

　　两者都是数据双向绑定的框架，我也只是看了看angular的api，没有真正的用过，所以对于angular只能有一个简单的比较   

1、 angular和vue都使用了指令。

　　指令是一个比较方便的操作， 而vue作者的指令的灵感也都是从angular而来的，所以vue总体来说还是react和angular的结合体，他把两者的优点做了结合，把缺点去除，所以，vue是个好东西，可惜不完全是原创，但是也足够让我们敬佩了。

2、 vue比angular的设计更简单。

　　在api上，虽然vue比react复杂一些，但是angular更加复杂。 

3、 vue更容易上手。

　　在vue和react的比较中，我们就知道vue对于小白来说很容易就可以上手了， 而angular还要学习typescript等等，上手难度较大。 

4、angular的双向数据绑定不容易控制。

　　在vue中，局部使用数据双向绑定，但是全局而言使用的数据单向绑定。 而angular使用的确实数据双向绑定，所以vue更容易管理状态。

5、 性能上来说vue更好一些。 

　　因为vue不需要使用angular的脏检查，一些vue都已经给你做好了。 在 AngularJS 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。AngularJS 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。

 react与angular

1、 两者的社区基础都很好。 

　　react是facebook的，angular是谷歌的，所以，我们不用担心其社区基础。

2、 angular是一个真正的框架，react是一个库。

　　react不是框架。 angular自身就继承了各种插件，所以，我们不需要再过多的考虑，它已经提供给你了各种解决办法，而react是比较轻的，只是解决了其中的某个痛点而已。

3、就性能而言，react更好。

　　react提出了虚拟DOM这个关键，很好地提升了性能，这一点要比angular强大。

 三大框架与jQuery的对比

　　尽管三大框架目前都是非常流行的，但是不得不说，jQuery的使用还是大多数（90%），但是选择三大框架还是选择jQuery？ 

如果你要做单页面应用，那么你就选择三大框架； 如果你要做多页应用，你就选择jQuery。 

如果你的数据都是在在服务器端进行修改的，那么毫无疑问，使用三大框架你也没法管理数据，所以使用jQuery； 但是，如果你的数据都是在客户端的，即前端需要处理大量的数据，那么这时就需要选用三大框架了，比如vue的store仓库、比如react的store，他们对于数据的存储都有很好的管理能力。  单项数据流更使得应用便于管理，如react的store -> view -> action -> store -> view -> action。。。 如此循环往复的单项数据流。

如果你要频繁的手动操作DOM，那么选择jQuery，毕竟jQuery封装了大量的兼容性的DOM操作api； 而如果你的项目是数据驱动的，那么选择vue、react，因为你只要给定数据，就可以使得页面得到渲染了， 而不需要操作dom，或者说，有了react，dom操作就不存在了。 

尽管三大框架目前都是非常流行的，但是不得不说，jQuery的使用还是大多数（90%），但是选择三大框架还是选择jQuery？ 

如果你要做单页面应用，那么你就选择三大框架； 如果你要做多页应用，你就选择jQuery。 

如果你的数据都是在在服务器端进行修改的，那么毫无疑问，使用三大框架你也没法管理数据，所以使用jQuery； 但是，如果你的数据都是在客户端的，即前端需要处理大量的数据，那么这时就需要选用三大框架了，比如vue的store仓库、比如react的store，他们对于数据的存储都有很好的管理能力。  单项数据流更使得应用便于管理，如react的store -> view -> action -> store -> view -> action。。。 如此循环往复的单项数据流。

如果你要频繁的手动操作DOM，那么选择jQuery，毕竟jQuery封装了大量的兼容性的DOM操作api； 而如果你的项目是数据驱动的，那么选择vue、react，因为你只要给定数据，就可以使得页面得到渲染了， 而不需要操作dom，或者说，有了react，dom操作就不存在了。 

尽管三大框架目前都是非常流行的，但是不得不说，jQuery的使用还是大多数（90%），但是选择三大框架还是选择jQuery？ 

如果你要做单页面应用，那么你就选择三大框架； 如果你要做多页应用，你就选择jQuery。 

如果你的数据都是在在服务器端进行修改的，那么毫无疑问，使用三大框架你也没法管理数据，所以使用jQuery； 但是，如果你的数据都是在客户端的，即前端需要处理大量的数据，那么这时就需要选用三大框架了，比如vue的store仓库、比如react的store，他们对于数据的存储都有很好的管理能力。  单项数据流更使得应用便于管理，如react的store -> view -> action -> store -> view -> action。。。 如此循环往复的单项数据流。

如果你要频繁的手动操作DOM，那么选择jQuery，毕竟jQuery封装了大量的兼容性的DOM操作api； 而如果你的项目是数据驱动的，那么选择vue、react，因为你只要给定数据，就可以使得页面得到渲染了， 而不需要操作dom，或者说，有了react，dom操作就不存在了。 

jquery和vue react等框架有着本质上的区别，从jquery到vue、react 或者说是到mvvm的转变，是一个思想的转变，是将原有的直接操作dom的思想转变到操作数据上去。

vue更关注与ViewModel层，它是通过双向数据绑定把View和Model层链接起来，通过操作数据完成对页面视图的渲染。

而jq是使用选择器$选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML相比，区别只在于更方便的获取和操作DOM对象，而且vue的数据和界面是在一起的，依赖于DOM元素的值。

vue则是通过对象将数据的view完全分离开，对数据进行操作不再需要引用响应的DOM对象，可以说数据和View是分离的，他们通过Vue对象的vm实现相互绑定。

从开发效率来讲，使用框架不论是对开发人员还是对公司来讲，都很大的提高了工作的效率。

对个人来讲，1.极大的降低了门槛，甚至不需要去冻得js的原型，继承等，只要按照vue的视图+逻辑+样式就可以。

而使用jq去写很复杂的DOM操作，后期代码会变得越来越难维护。

前端当前最火的三大框架当属vue、react以及angular了。 但是在做项目的时候，我们怎么去选择呢？  这里做一个比较，希望大家可以有一个比较清晰的认识。

今天分享的内容是前端3大框架，主要有介绍前端的发展历程，框架出现的原因和介绍angular、react和vue各自的优缺点，让大家能够对这3个框架有一个大致的了解。

首先介绍一下前端技术的发展

1994年可以看作是前端历史的一个起点，在这一年的10月13日，网景公司推出了第一版的navigator，这一年tim创建了w3c，他的好基友发布了css，还是这一年，php诞生。

navigator是一个对象，它包含了有关浏览器的信息，w3c是万维网联盟，是web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，w3c发布了超过200项影响深远的web技术标准和实施指南。php是加拿大的Rasmus Lerdorf创建的，他当时是为了支持他的个人网站。php的原意是personal home page，宣传语是超文本处理者。让前端页面可以和后端进行交互，实现了数据库的交互。直到现在php也是一门重要的服务端语言。

这张图片就是最早期的浏览器

因为当时的万维网www目的很单一。是欧洲核子研究组织的一帮科学家为了方便看文档、传论文而创造的，这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字和图片构成的HTML页面，在当时，这样的功能就已经完全满足了学术交流的需要，所以网页的早期形态和Document一样，完全基于HTML页面，并且所有内容都是静态的。

然而，随着网页从学术机构走向公众社会，网页承载的功能便超出了学术范围而变得更加丰富，因此早期网页的局限性也逐渐显露出来。

局限性主要有三点

第一，所有的网页都基于HTML页面，因为没有任何手段可以控制局部内容的显示和隐藏，不像现在可以用if或者hide这些属性去完成这个任务，因此任何局部的变化哪怕只多出一个标点符号，都只能重新下载一个新的页面。

第二，计算任务只能在服务端实现。由于当时网速的限制，与服务器通信的过程是非常缓慢的，并且此过程是同步阻塞的，于是就会出现这样的一个场景：用户提交一个表单，然后整个页面消失，浏览器呈现白屏，经过漫长的等待，浏览器渲染出一个和之前一模一样的页面，只不过输入框旁边多了一排红色小字：用户名错误。

第三，所有页面都是静态的，这意味着一个电商网站有一千种商品，哪怕页面布局一模一样，也必须写一千个单独的页面。

以上第一条和第三条限制，证明早期网页形态低下的效率是无法仅仅通过提高网速解决的，即使是第二条，在很快的网速的条件下，它会闪屏，也是不行的。

随后：

1995年网景推出了JavaScript，实现了客户端的计算任务（如表单验证就是在前端完成，而不是请求发给后端，在请求页面了），不会再出现那种等了半天只为了返回一行用户名错误的情况。

1996年微软推出了iframe标签，实现了异步的局部加载。iframe就相当于页面中的一个页面，只需要刷新这个页面而不用刷新整个页面。

1999年W3C发布第四代HTML标准，同年微软推出了用于异步数据传输的ActiveX，ajax的前身，随即各大浏览器厂商模仿实现了XMLHttpRequest。这标识着Ajax的诞生，但是Ajax这个词是在六年之后问世的，特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax才获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。web2.0的核心主旨是以用户为中心。用户不再是单纯的读网站作者输出的内容，同时也在向网站输出内容。

2006年，XMLHttpRequest被W3C正式纳入标准。

至此，早期的Document终于进化为了Web page，上述三个局限都得到了妥善的解决。

之后就来到了jquery的时代

早期的网页开发是由后端主导的，前端能做的也就是操作一下DOM。2006年 John Resig发布了jQuery，jQuery主要用于操作DOM，其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手，因此很快风靡全球，大量基于jQuery的插件构成了一个庞大的生态系统，更加稳固了jQuery作为JS库一哥的地位。

在百度搜索jquery，第一条内容就是它的一个比较庞大的插件库网站。

再看这个图，老夫写代码就用jquery，

这个图不仅是用来搞笑的，他也确实代表着jq在鼎盛时期，在前端人员心里的一个地位。

其实在web初期，制约Web开发从后到前的因素很简单，就是前端很多事干不了或干不好，当时的浏览器性能弱，标准化程度低。特别是占据大量市场份额的IE，不仅ugly，并且buggy。

于2008年问世的谷歌V8引擎改变了这一局面。现代浏览器的崛起终结了微软的垄断时代，前端的计算能力一下子变得过剩了。标准组织也非常配合的在2009年发布了第五代JavaScript，前端的装备得到了整体性的提高，前端界就像当年改革开放一样，走进了一个令人目不暇接的新时代。

2009年AngularJS诞生，随后被谷歌收购。2010年backbone.js诞生。2011年React和Ember诞生。2014年Vue.js诞生……前端能做的事越来越多，前后端分离就是大势所趋了。

这张图片显示的是目前各大浏览器的使用情况，可以看出chrome已经算是一家独大。IE8之所以还有12.03%的使用率，是因为还有一部分人在使用win7系统。

如果继续将时间缩短，可以看出chrome浏览器所占比例在逐步增加。

从前端的发展历程可以看出，前端开发在产品的整个开发中所占的比重在不断变大，现代浏览器强大的计算能力让前端开发可以做更多的事情，不单单是实现页面的特效，展示内容等。随着数据量的飙升，前端接触到了越来越多的数据，jQuery专注于DOM的开发模式就显得力不从心了。

框架应运而生。

框架的始祖，angularjs

对于实现静态页面的动态话，最初的解决方案是使用js或jq来操作dom，这就导致在一个复杂的页面，开发人员需要进行大量dom操作。而且很多重复的操作，只能通过编写重复的代码或封装函数来解决复用，jq就封装了一些常用的js函数。

angularjs的出现，简化了开发人员对dom的操作。我们不需要再像之前使用js、jq那样，要高度关注dom结构的操作，而是只需要关注数据模型的变化，框架会帮助我们去改变dom。还有最重要的一点，就是代码的复用问题，不再是简单的复制粘贴，而是可以将一个模块进行封装，然后实现高度复用。这种封装是无法通过封装方法来解决的。

angularjs是2009年由Misko Hevery等人创建，后被Google收购。现在的angular系列也一直由google的团队进行维护。angularjs在当时可以称作一个完整的解决方案，在构建CRUD应用时，有着很大的便利，CRUD中需要的数据绑定、表单验证、路由、组件重用等都包含在angularjs中。大部分的网页都是crud，除了网页游戏那些。

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。

例如：

使用双大括号{{}}语法进行数据绑定；

使用DOM控制结构，来实现迭代或者隐藏DOM片段；

支持表单和表单的验证；

能将逻辑代码关联到相关的DOM元素上；

能将HTML分组成可重用的组件。

随着前端技术的继续发展，越来越多的框架出现了。

随后出现的其他框架完成的任务其实与angularjs基本相同，只不过在实现方式和效率等方面有所差别。大浪淘沙，现在还活跃在人们视野中的框架，就是要说的3大框架。

angularjs是通过directive（指令）去封装组件，react和vue是通过component，就是组件。

angular、react和vue都是mvvm模式，（model，view，view-model），angular的数据绑定、操作dom就是通过viewmodel完成的。react和vue的view-model的高效率通过框架自身提供的virtual dom（虚拟dom）来实现，它是一个js对象，我们数据的变化会被映射到这个虚拟dom上，然后虚拟dom再去和真实的dom通过各框架自己的算法进行对比，来修改真实dom结构，这就要比angular的viewmodel直接绑定真实dom树的操作要更有效率一些，因为虽然现在的浏览器计算性能大幅度提高，但是频繁对真实dom树的操作依然是一个很大的开销，这要比操作一个js对象，就是virtual dom，的开销大很多。然后这里说的效率不是指人工优化性能提升的那种效率，因为它经过算法的比较再去找树一定会比开发人员针对某一个dom节点的操作效率要低，它完成的是提升了一个整体的水平，因为开发人员无法在一个大项目中对每一个dom元素的操作都去优化。

简单点说，viewmodel就是帮我们完成了对dom的操作，不需要我们自己去整了。然后angularjs的viewmodel要比react的和vue的落后，效率低。

既然框架的目的和解决的主要问题是相同的，那么哪一个是更加优秀的方案，就成为了前端人员一直争论的一个话题。

由于es版本的不断升级，js的不断进步，已经有许多操作不再需要框架去完成，比如一些新关键字、新方法的使用就可以完成angularjs框架内部复杂的过程。再由于数据量的飙升，用户对网页性能的不断看重，等等原因，让angularjs逐渐的被淹没在时代的洪流中。

随后google也看出了angularjs不再适应时代的发展，开始对其进行跨时代的、破坏性的升级，这就导致angular2之后的版本和angularjs就相当于两个框架了，无论是写法还是实现方式上都有了巨大的差别。

所以现在所谓的框架之争，其实已经把angularjs即angular1.x排除在外了。指的是angular、react和vue的争斗。

angular是google升级、维护。

react由facebook升级、维护。

vue是由中国人尤雨溪和他的团队负责。

介绍三者各自的优缺点之前，我们先看一下目前这三个框架在调查中的表现，也算一个可以参考的数据。

图中深紫色代表用过还想用，浅紫色代表用过之后不想用，深黄色代表听过想去用。我们基本上可以通过这个图看出，在2017年，被调查的这些人中对于框架的选择。React的深紫色和深黄色占的比重是最多的。对于用过还想用这部分来说，它要比angular2、vue、angularjs加起来还要多。再看浅紫色，用过不想再用的人数，angularjs是最多的。再看深黄色，可以看出vue的比重是最大的，这证明vue给大家的印象还是不错的，也许会在不久的将来逐渐占领市场的部分份额。

如果单从这张图来看，那么react无疑是框架之争的赢家，再看这张图。

angularjs的极速下滑伴随着angular的极速上升，这证明google的angular系列还是有某些特质在吸引着开发者。

最后再看一组数据。

从比例来看，react和vue的满意度都超过了90%，angular2基本不变，这个angular指的是angularjs，下降了7%。

以上的数据毕竟是别人的感受，对于自身而言，在开发过程中是否要使用框架，或又是使用哪种框架还要根据实际情况来决定，下面要说的就是各框架之间的优缺点，之所以没有说对比，是因为这三个框架还没有一个可以说在任何方面都完胜对手，因此更好的办法我认为就是去了解他们的优缺点，再来对比自身项目，看哪个框架更适用。

angular4对于2来说，有了一定的进步，比如也在逐步拆分它的功能，减少体积，增强性能以及router的升级等，在最初，三者之间的性能也会总被拿出来作为某个框架更强的一个论据，最后从各大网站的性能统计上来看，在用户实际使用中，三大框架对于PC端的用户来说是差不多的（虽然性能上的确angular会弱于另外两个，但是毫秒之间的差距，用户是很难体验出来的）。它更多的是在影响开发者，而2和4对于开发者来说是相差不大的，这一点从angular2的代码向4升级时并不难就可以看出来。因此下面会将angular2和4，统称为angular。

angular是最早出现的框架，第一个优点就是背后靠着google这座大山，有着稳定的维护团队。并且google的Adwords业务（一个按点击量收费的广告业务，据说是google比较赚钱的一个业务）就使用了angular，作为一个赚钱的业务，google也会让它的环境更稳定一些。

第二个：angular+typescript，google和微软的双剑合璧。angular全面支持typescript语法，typescript不仅包含es6中的语法，也包括一些新的语法，最重要的一点是它增加了类型规则，这让代码的可读性和可维护性大大的提高，它也可以让有java或.net背景的开发人员更快的掌握。

第三个优点：完整。其实相对react和vue来说，angular更可以说是一个框架，而react和vue本身只能算是一个库。angular自带了几乎所有页面应具有的功能，路由、表单、ajax、模版、双向数据绑定等等。它原生的form表单模块非常强大，除了双向绑定的基本功能，还自带验证等，开发人员不需要再去为了这些功能找第三方库，angular一个框架就包含了这些的所有，因此对于选择困难症人群，这是一个优点。

还有一个优点可以算在这里，每个框架都有自己的cli脚手架，可以快速搭建项目雏形。angular-cli自带国际化。

第四个优点：它的每一个组件都是一个文件夹，html、js、和css文件是分开的，让代码更加清晰。

而且它的各类型文件单独存在，在开发中使用任何IDE都可以检查代码。可以使用自带的格式化功能，让开发过程中的代码更整洁。

这些是它的优点，然后是缺点。

第一个，最大的缺点，难调试。angular的代码整洁、规范，很容易维护和审查，但是它的控制台报错信息太差了，大部分情况是无法看出问题到底在哪，这就在开发过程中给调试增加了很大的难度。而react和vue在开发中会更加明确的让开发人员了解到错误出在哪里。

第二个，它是一个胖子，它自带了很多模块，这解决了开发人员在选择上耗费的时间，但是这也导致它太重了，压缩后达到了168k，是vue50k的三倍还多，即使在4版本中，拆分了一些功能，但是它依然是个胖子。这些功能无论你用还是不用，它就在那里，占着空间。如果在pc端或许还体现的不是很明显，如果在移动端就会体现出胖的缺点。

第三个，就是学习成本的问题，首先ts，它的确对后台的同学们更友好，但是对于一个纯前端人员来说，就是一个另外要学习的知识点。然后是angular它有超多的概念，有一些单单通过文档还很难于理解，还有不友好的api文档。因为它的东西太多，所以api文档内容也很多，增大了阅读难度。这就导致了刚接触angular的人很难上手。也给心理上造成了很大的压力，那文档一看就不想看了，还有api，它是英文的。

难于调试和更高的学习成本，让许多人望而生畏。

我们来看react，react的第一个优点，和angular一样，有一个大厂的团队在维护（万万没想到facebook最近遭遇了天价罚单，这是否会对react的维护造成影响还未可知，所以暂时把这个仍然算作它的一个优点，如果react因此死了，简直就是一个大写的尴尬）。

react本身不能算作一个框架，因为它本身的功能有限，不过它有一个庞大的生态系统，全世界无数开发人员在为它提供开源包，也许对于开发人员一个很难完成的问题已经有其他人员帮你完成了，只需要引入就好了。

之前一直在说angular很重。react和vue要比它轻量，体积小本来应该是算在react和vue的优点中，但是在一个大型的项目中，就比如一般的spa，react要用的是react+redux+react-router或许还要加上发送请求的axios，如果有一些其他的需求还要再加包，vue也同样，vue+vuex+vue-router+vue-axios，这就导致react和vue体积小的优点在逐步减小。所以这一方面我们应该说react和vue的可组装性是强于angular的，更加灵活，想用什么用什么。

第四点就是react的单项数据流机制，这相对angular的双向数据流来说，因为单向，所以它的各种变化都是可预计的，不像双向数据流，一旦数据流复杂起来，大家都互相触发变化，开发人员根本猜不出你改变一个地方会在另外什么地方跟着变。

react下载量高居不下的一个重要原因是它的react-native，一个优秀的移动端开发框架，使用react特有的jsx语法，可以让开发人员像写pc端页面那样去写移动端，它自动适配了不同的移动端的屏幕分辨率。jsx语法是将html融入到js中。虽然angular的ionic和vue的weex现在也可以进行移动端开发，不过最优秀的，最被大众认可的仍然是react-native。这是github上的下载量，可以看出来下载量远远超过其他两者

最后一点，react的最大优点就是state，所有的数据都储存在state中，只可以使用setState方法去改变。开发人员可以把所有的数据都存放在state中，让所有组件都去这里边取数据，当然如果组件过多的话会让顶级组件的state过重，这时可以将公用的放在顶级state中，各自私用的存放在自身的state中。这样在开发和维护的过程中只需要关注各个state就好。

下面来看react的缺点。

第一点，react的灵活性就导致了在选择上要耗费成本，确定使用框架的人要去考量这个项目有哪些功能，要用到哪些包还要去看哪些包的质量要高一些，因为相同的功能也会有很多开源人员贡献包。这些工作耗费的时间成本也是一个项目不得不考虑的问题。这一问题在vue上也同样存在

第二点，react的jsx语法，它学习起来并不是很难，应该是比ts要简单一些。但是它的写法是把html和js结合起来，这就导致在一些IDE上，你没法对它格式化，如果格式化的话，它会将html像js语法那种格式排列。代码的可读性要差一些。而且在js中写html时就要避免两者出现相同的关键字，比如class，在jsx中就要写成className，还要是驼峰式写法

第三点，使用redux，redux在处理数据流的时候是使用saga语法，开发人员要去学习saga的写法，然后saga的异步操作和同步操作是分开在两个函数中写，要在组件本身写一次，数据流到父组件时还要再写一遍，写法上要更复杂，如果想简化它，就要用一个前端应用框架-DVA，就还是通过加东西来增加开发效率。

最后是vue，vue的一个特点是每一个.vue文件都是一个组件，在这一个vue文件中包括style、scripts、template三个标签来包含css、js和html。它是最后一个出现的框架，所以在它的实现中，它取其他两个框架之长，去其他两个框架之短，借鉴了许多好的设计理念，比如angular的指令、双向绑定，react的component思想。

相比其他两个框架，vue是国产框架，所以它对国内开发者在学习它时要更友好。它的第一个优点，就是它的学习成本是三个框架中最低的。中文的api文档，我觉得单这一点，就让国内的开发者在学习vue时能够节省超多的精力。

它的vuex，完成了redux的功能且在写法上更加便捷，不再需要dva这种框架去帮他简便写法。

vue的体积是三个框架中最小的，加上它的处理机制，在非大型项目的对比中，它的性能是最高的。

其实无论再说哪些优点，归结起来就是：vue在非大型项目上，有了react和angular的优点，且更简单，更易上手。

vue的缺点同样也很明显。

首先相比其他两个，它是由个人团队开发和维护的，虽然个人的团队并不一定没有大厂的团队稳定，但总感觉个人团队对于维护vue这种用户越来越多的框架来说，还是存在着更大的风险。

第二个，由于vue的实现原理利用了es5中的一个方法，这就导致了，如果浏览器是不支持es5的，那么它只能放弃vue了。比如ie8

第三点，vue的响应系统无法检测属性的添加和删除，以及某些数组的修改，开发人员有时会忽略这一点。

第四点只能说是对比其他两个框架算是缺点，就是它毕竟发展的时间没有它们长，生态环境要更小，有时在开发中出现了问题，无法在网络上寻求到有效的帮助。

至此，三个框架的优缺点就基本介绍完了，最后简单总结一下。

就我个人认为，angular的缺点更明显、它难以调试的缺点更会影响一个项目在开发过程中的进度。vue较小的生态环境和少解决方案也让它在大型项目的开发中败给了react。所以我觉得react更适用在一个成规模的项目中去使用。

对于一个前端开发人员来说，框架或者库始终只是一个有助于开发的工具，无论使用哪个，都需要有扎实的js基础，将js掌握牢固是所有前端人员达成的共识，没有哪个框架是脱离它的，我们可以不使用框架，但是不能不用js，只要把它掌握好了，无论哪个框架都能够更加轻松的上手，不仅是使用它们，还包括了解他们的机制。甚至可以自己去封装一个库。

随着前端技术的不断发展，框架和库也越来越多，对于到底哪个才是最符合项目的，需要经验更加丰富，对框架和项目有更加深入的了解，这样才能够有一个更加可靠的决策。

   即vue和react都是专注于视图的框架，只是在局部区域，vue提供了双向数据绑定，这样更有利于我们处理表单等问题，而react在这方面就有了一定的劣势。。

　　　而如果希望做大型的项目，对于vue来说，就可以使用vue-router，来构建大型网站的路由； 状态复杂，不好管了，我们就使用vuex； 所以，这也就是官网所说的渐进式的框架 了 。同样的，react也是可以直接使用的，包括react-router和redux，方便我们构建大型应用。   只是前者的周边库是由尤雨溪维护，后者是由react庞大的社区维护的。

React 和 Vue 有许多相似之处，它们都有：

• 使用 Virtual DOM

• 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方，比如更丰富的生态系统。