精选文章 vue、react、angular三大框架对比 && 与jQuery的对比-已整理

vue、react、angular三大框架对比 && 与jQuery的对比-已整理

作者:让想法变成执行力 时间: 2021-02-05 09:47:31
让想法变成执行力 2021-02-05 09:47:31
【摘要】vue与react 
  vue和react是当前最火的两个前端框架,vue的发展很快,但是目前来说,react的生态系统会更强大,世界上使用这个框架的人也很多。 另外,react是facebook官方维护的, 而vue是尤雨溪本人维护的。 并且在其他周边库,如react的react-rouer和redux,是react社区在维护的。 而vue的vuex和vue-router都是尤雨溪在维护...

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操作就不存在了。 
勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:原生Bert的训练和使用总结

下一篇:国标GB28181视频流媒体平台EasyGBS如何将视频分享到其他平台?

您可能感兴趣

  • vue中使用html2canvas和qrcanvas配合

    1.第一步,装插件 安装html2canvas : npm install html2canvas --save 安装qrcanvas: npm i qrcanvas 2.在需要使用的页面上引入 import h...

  • Vue移动端搜索页面的历史记录写法

    Vue移动端搜索页面的历史记录写法 前言 本文用于记录对于搜索页的历史记录的学习。 预览 先上两张图,分别为展示隐藏搜索列表和历史记录。 html部分 <template> <hips-view ...

  • vue单页面应用项目目录

    1.什么是单页面应用(SPA) 单页应用程序 (SPA) 是加载单个HTML页面系统的不同功能通过加载不同功能组件的形式来切换不同功能组件全部封装到了js文件中这些文件在应用开始访问时就一起加载完,所以整个系统在切换不同功能时,页面的地址是不变的 系统切换可以做到局部刷新,也可以叫做无刷新,这么做的目的是为了给用户提供更加流畅的用户体验 2.生成项目...

  • ABP框架—前台:Vue项目启动(4)

    1.安装Node.js环境 官网地址:https://nodejs.org/en/download/    安装完成后,命令窗口输入:node -v,如打印版本信息则说明成功 2.npm安装VUE脚手架(vue-cli) 此步骤依赖node坏境 命令窗口输入:npm install -g vue-cli //-g是全局安装 安装完成后,命...

  • Vue 定位,瞄点

    可以自己试试: <template> <div> <div class="input" id="anchor-first"> <div> <el-button type="pr...

  • vue定时请求改变单页数据的内存地址问题

    业务场景1 我们需要做一个数据列表页面,需要让他每8秒进行一次更新 存在问题及如何解决 1、直接写定时任务,赋值给list(列表数据保存的对象),会直接破坏vue对象(其实是内存地址被破坏) 2、我们可以直接打...

  • dataTables-使用详细说明整理

    DataTables(http://www.datatables.net/)应该是我到目前为止见过的,功能最强大的表格解决方案(当然,不计算其它整套框架中的table控件在内)。 先把它主页上写的特性翻译罗列如下: 可变长度分页;动态过滤;多列排序,带数据类型检测功能;列宽度的智能处理;从多种数据源获取数据(DOM,js Array, a...

  • Atom中七个实用React插件

    提前下载好Atom并安装,打开setting > install, 出现界面如下: 直接在Search packages中搜索需要的插件即可 插件一: atom-ternjs  JS ES6新语法支持,代码智能提示补全 插件二:atom-beautify  代码美化格式工具 插件三:open in browser  将HTML代码一键在...

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
vue、react、angular三大框架对比 && 与jQuery的对比-已整理介绍:华为云为您免费提供vue、react、angular三大框架对比 && 与jQuery的对比-已整理在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多vue、react、angular三大框架对比 && 与jQuery的对比-已整理的相关内容。| 移动地址: vue、react、angular三大框架对比 && 与jQuery的对比-已整理 | 写博客