web前端 vue、react、angular三大框架对比与jquery的对比

约定不等于承诺〃 2021-07-28 21:55 706阅读 0赞

前端当前最火的三大框架当属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操作就不存在了。

[Weex]: https://alibaba.github.io/weex/