vue、react、angular三大框架对比 && 与jQuery的对比

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

　　

vue与react

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

 

一、都在使用 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的大火也就可想而知了。 、

 

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

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

　　    首先经过组件化之后，这个组件就是可复用的了，好比若是使用传统方式写一个网站，若是标题和结尾都是同样的，那咱们可能会不断的复制、粘贴，可是呢，若是使用了组件化的思想，只须要写好组件，而后在须要的地方插入组件便可。 

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

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

 

 

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

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

　　　而若是但愿作大型的项目，对于vue来讲，就可使用vue-router，来构建大型网站的路由； 状态复杂，很差管了，咱们就使用vuex； 因此，这也就是官网所说的渐进式的框架 了 。一样的，react也是能够直接使用的，包括react-router和redux，方便咱们构建大型应用。   只是前者的周边库是由尤雨溪维护，后者是由react庞大的社区维护的。

 

 

四、vue比react更容易上手。

　　   这一点是毋庸置疑的，为何这么说呢？ 由于对于vue，不管你是使用webpack仍是broserify， vue-cli均可以很好地知足你的开发任务。

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

　　　可是react的学习会更加复杂一些，react须要有ES6的基础，由于react组件的建立可能是使用es6的class来建立的，因此会更加麻烦一些，而且对于JSX语法，仍是有必定的学习成本的。 

　　　所以咱们说vue更容易上手。

 

 

五、 性能都很好。

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

 

 

六、vue的优化作的要比react好一些。

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

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

 

七、vue和react一样都支持本地渲染。

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

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

 

 

八、 react更为繁荣。

　　react社区仍是很是繁荣的，因此在知名度方面react也是更胜一筹，使用react和react-native的开发人员仍是不少的，这也是vue须要学习和进步的地方。

 

 

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

　　  在这一方面，react和vue的出发点彷佛是不同的，可是我仍是比较喜欢vue的写法。 好比，对于列表循环，使用vue，直接在标签上写 v-for 便可，而后就能够直接循环了，而react须要经过一个数组的map，而后在return，在形式上来讲，vue的写法仍是更加舒服一点。 另外，因为vue局部的数据双向绑定，因此vue在处理表单这一块也是游刃有余，很是方便，而react仅仅是处理一个表单，就须要添加不少无关的代码，这个仍是很是别扭的。 

　      能够看得出来，vue提供了更多的api，能够作更多的事情，可是， 这也体现了react的优势，即很是简单，提供的api不多，它只帮咱们作了虚拟DOM的工做，其余的事情可让咱们自由的发挥，因此从这个角度来讲，react仍是更加简单一些的。    

 

 

十、 vue的文档更加好。

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

 

 十一、 不管是vue仍是react咱们都不须要触碰DOM。 

　　就这二者而言，咱们都关心虚拟DOM，而不用去触碰DOM，这些都是vue帮助咱们处理好的了。由于dom的操做是费时的，因此经过vue，咱们能够很好地解决这些问题，尽量少的减小DOM。 通常来讲，对于一个项目，咱们使用了vue或者是react，jquery基本上就是不须要的了。若是真的须要，看看到底哪里作的不对。

 

 

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

　　在vue中，事件绑定以后，能够在组件销毁的同时事件接触绑定，无需咱们本身去手动清除； 而react却不是这样的，react须要咱们在 componentDidMount 的时候绑定，在 componentWillUnMount 的时候接触绑定，不然会出现问题，尤为是添加在 document 上面的事件 。 

 

 

　　

 

 

 

 

vue与angular

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

 

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

　　指令是一个比较方便的操做， 而vue做者的指令的灵感也都是从angular而来的，因此vue整体来讲仍是react和angular的结合体，他把二者的优势作告终合，把缺点去除，因此，vue是个好东西，惋惜不彻底是原创，可是也足够让咱们敬佩了。

 

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

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

 

三、 vue更容易上手。

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

 

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

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

 

五、 性能上来讲vue更好一些。 

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

 

 

 

 

 

 

 react与angular

一、 二者的社区基础都很好。 

　　react是facebook的，angular是谷歌的，因此，咱们不用担忧其社区基础。

 

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

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

 

　　

三、就性能而言，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操做就不存在了。 

 

 

 

 

 

　　   

 

 

 

 

 

 

 

 

 

 

 

 

参考文章： https://cn.vuejs.org/v2/guide/comparison.html