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

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

作者:让想法变成执行力 时间: 2020-07-24 11:27:51
让想法变成执行力 2020-07-24 11:27:51

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占位
分享文章到微博
分享文章到朋友圈

上一篇:2020N2观光车和观光列车司机实操考试视频及N2观光车和观光列车司机作业模拟考试

下一篇:docker环境下php-fpm slowlog不能追加写入

您可能感兴趣

  • 50个最新TypeScript面试题合集 – TypeScript开发教程

    以下是最常见的Typescript面试问题和答案。 js项目如何升级为ts?有何影响?(参考:https://www.cnblogs.com/thyong/p/12182579.html) ts 基础类型都哪些,他们跟js的区别 ts为什么会流行?与ECMA新规范的关系? tslint都能配置哪些功能?对开发流程有何影响? 如何使用js实现类型约束,枚举等特性么?(仅需要在 变量、函数的参数...

  • 滴滴开源了哪些有意思的项目?

    点击上方 Java后端,选择 设为星标 优质文章,及时送达 作者 | 滴滴技术 出品 | 滴滴技术 作为卓越的一站式移动出行和生活平台,滴滴在亚洲、拉美和澳洲为超过5.5亿用户提供出租车、快车、专车、豪华车、公交、代驾、企业级、共享单车、共享电单车、汽车服务、外卖、支付等多元化的服务。滴滴平台上,有数千万车主及司机获得灵活的工作和收入机会,年运送乘客超过100亿人次。 滴滴开源的三年时间里,...

  • 干货 | 携程度假无线前端架构演进之路

    作者简介 Jade Gu,携程高级前端开发专家,负责度假前端框架设计和 Node.js 基础设施建设等工作。 这篇文章将简略地介绍我们当前的无线前端架构设计及其演进之路。主要内容包含以下几个部分,希望我们的经验能带给大家一些启发。 1)当前的前端方案及其解决的问题 2)现在面对的新挑战 3)我们的前端方案设计和选择。 一、当前的前端方案及其解决的问题 1.1 当前方案的技术背景 将时间调回到...

  • Spring 安全性:深入认证和授权

    介绍 每个人迟早都需要为他的项目增加安全性,在Spring生态系统中,您可以借助Spring Security库来做到这一点。 因此,当您继续将Spring Security添加到您的Spring Boot(或普通Spring)项目中,然后突然...

  • webpack 原理分析与性能优化(2w字精华)

    webpack webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件。 Webpack 核心概念: Entry(入口):Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。 Module(模块):在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖...

  • 揭开NoahV智能运维前端框架的神秘面纱

    作者简介 莫海艳 百度资深前端研发工程师 百度智能运维(Noah)产品前端技术方向负责人,在运维数据可视化、中后台前端解决方案等方向上,有着丰富的实践经验。 干货概览 众所周知,前端有三大主流框架:Vue、React、Angular,这些前端框架可以帮助我们快速搭建项目,但是我们在实际项目中往往还需要投入很大精力去使用其他代码库与应用作为补充支持(如:需要一些基础的UI组件库,需要HTTP请...

  • Vue学习进阶之路

    过去传统的前端开发是jsp+jquery,而现在前端短短几年时间,技术已经发生了天翻地覆的变化 工具类:npm 以及package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。 vue-cli: 是用来生产vue项目的命令行工具 babel-cli:Babel提供babel-cli工具,用于命令行转码。 babel: Bab...

  • web前端框架常见问题

    面向对象: 面向对象是一种程序开发的方法,它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的灵活性、重用性和扩展性。对象是把数据及对数据的操作方法放在一起,作为一个相互依存的整体。再说一下类与对象,类描述了一组有相同特性和相同行为的对象,具有相同属性和相同方法的对象的抽象就是类。即,对象的抽象是类,类的实例是对象。在面向对象的编程中,把用类创建对象的过程称为实例化。 面向过程与面...

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

免费套餐,马上领取!
CSDN

CSDN

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