vue、react、angular三大框架对比

  前端当前最火的三大框架当属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基本上就是不需要的了。如果真的需要,看看到底哪里做的不对。

  

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强大。

  

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

时间: 2024-10-13 17:52:25

vue、react、angular三大框架对比的相关文章

Python实现简单框架及三大框架对比

手撸web框架 简单的请求响应实现 要实现最简单的web框架,首先要对网络熟悉,首先HTTP协议是应用层的协议,只要我们给数据加上HTTP格式的响应报头,我们的数据就能基于socket进行实现了 import socket sever = socket.socket() sever.bind(('127.0.0.1',10000)) sever.listen(5) while True: conn,addr = sever.accept() data = conn.recv(1024) prin

vue/react/angular开发的css架构思考

前端开发现在已经从传统的后端web多页面开发模式转向前端单页SPA开发模式,而vuejs/react/angular则是开发SPA非常优秀的前端框架.组件化开发由react最早提出,vuejs后发优势,将组件化开发贯彻到了极致.虽然spa开发由于组件式开发带来的组件重用,可维护,可扩展非常好,但是css样式的管理一直是一个令前端团队头疼的问题,特别是当页面越来越复杂,并且有多个SPA页面时如何能够让样式重用,并且可维护,可扩展并没有一个特别有效和被验证过的普适方案.本文试图总结一些css模块化在

vue react angular对比

1.数据绑定 1)vue 把一个普通对象传给Vued的data选项,Vue会遍历此对象的所有属性,并使用Object.defineProperty将这些属性全部转为getter/setter.Object.defineProperty为ES5的新属性,无法模仿,所以vue不支持IE8以及更低版本浏览器的原因.用户看不到getter和setter但是vue内部做了追踪依赖,在属性被访问和修改时通知变化.每个组件都有一个watcher对象,他会在组件渲染的过程中把属性记录为依赖,之后当该属性的set

vue,react,angular,windows 环境本地配置单页面应用

一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给刷新也面.刷新页面后就为变为404页面. 二.原因:nginx 在解析路径的时候:比如: localhost/a     这个路由.其实nginx 在解析路径 时候.为去root根路径下去找a文件.但是找不到.所有就会报错. 但是在单页面应用中localhost/a 其实是 VUE, 和react

PHP三大框架对比

写PHP程序一年有余期间使用了CI, ThinkPHP, Phalcon等框架说一下我的感受 CI 优点: 这个框架的入门槛很底 极易学 极易用 框架很小 静态化非常容易 框架易扩展 文档比较详尽 缺点: 在极易用的极小下隐藏的缺点即是不安全 功能不是太全 缺少非常多的东西 比如你想使用mongoDB你就得自己实现接口... 对数据的操作亦不是太安全 比如对update和delete操作等不够安全 暂不支持sae bae等(毕竟是欧洲)对大型项目的支持不行 小型项目会非常好 ThinkPHP 优

三大框架对比

  Angular Rreact(社区活跃度最高,用户量最大) Vue 组织方式 MVC 模块化 模块化 数据绑定 双向绑定 单向绑定 双向绑定 模板能力 强大(自定义指令) 自由(jsx) 简洁 自由度 较小 很大 较大 路由 自带的静态路由 动态路由工具 react-router 动态路由工具  vue-router 文档 英文 英文 多语言 上手难度 高(mvc 依赖注入 装饰器等概念,对后端比较友好) 较高(jsx 构建复杂应用) 简单(快速构建) APP方案 ionic RN(相对成熟

前端(三大框架、Bootstrap,jQuery,自我整理)

前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增加了translate(),能完成以前一定需要js才能做到的动画,同时增加了flex弹性盒子(响应式设计,提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间,以往使用float) 前端框架 一.Bootstrap 在Bootstrap的官网介绍中,Bootstrap is th

前端三大主流框架的对比React、Vue、Angular

前端三大主流框架的对比React.Vue.Angular React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它.它有以下的特性: 1.声明式设计:React采用声明范式,可以轻松描述应用. 2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互. 3.灵活:React可以与已知的库或框架很好地配合. 优点: 1. 速度快:在UI渲染过程中,

前端三大框架Angular &amp; React &amp; Vue

前端三大框架: Angular[Google]:一套框架,多种平台移动端 & 桌面端.学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web.移动 Web.移动应用.原生应用和桌面原生应用. React[Facebook Open Source]用于用户界面构建的JAVASCRIPT库. 初步认识:react可以使构建交互UI的过程变得简单.对于你的应用里面的每个状态视图,当数据变化的时候,React都会及时并且正确有效率地进行对其更新.这种陈述式视图,将