欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

vue 与 react,angular 优缺点对比

vue 与 react,angular 优缺点对比

96 
JamHsiao_aaa4 
 0.4 2018.03.02 14:10 字数 1698 阅读 22464评论 0

vue 

API设计上简单,语法简单,学习成本低 

构建方面不包含路由和ajax功能,使用vuex, vue-router 

指令(dom)和组件(视图,数据,逻辑)处理清晰 

性能好,容易优化 

基于依赖追踪的观察系统,并且异步队列更新 

独立触发 

v-model 实时渲染

适用于:模板和渲染函数的弹性选择 

简单的语法及项目搭建 

更快的渲染速度和更小的体积

react 

利用jsx创建虚拟dom 

是一种在内存中描述dom数状态的数据结构 

函数式的方法描述视图 

使用虚拟dom作为模板 

程序片段 

不好控制dom 

生命周期 

服务端渲染:react的虚拟dom的生成可以在任何支持js的环境生成的,所以可以在node环境生成,直接转为string,然后插入到html文件中输出浏览器便可 

适用于:大型应用和更好的可测试性;同时适用于web端和原生app;更大的生态圈

优点

React伟大之处就在于,提出了Virtual Dom这种新颖的思路,并且这种思路衍生出了React Native,有可能会统一Web/Native开发。在性能方面,由于运用了Virtual Dom技术,Reactjs只在调用setState的时候会更新dom,而且还是先更新Virtual Dom,然后和实际Dom比较,最后再更新实际Dom。这个过程比起Angularjs的bind方式来说,一是更新dom的次数少,二是更新dom的内容少,速度肯定快 

ReactJS更关注UI的组件化,和数据的单向更新,提出了FLUX架构的新概念,现在React可以直接用Js ES6语法了,然后通过webpack编译成浏览器兼容的ES5,开发效率上有些优势. 

React Native生成的App不是运行在WebView上,而是系统原生的UI,React通过jsx生成系统原生的UI,iOS和Android的React UI组件还是比较相似的,大量代码可以复用 

维护UI的状态,Angular 里面使用的是 $scope,在 React 里面使用的是 this.setState。 而 React 的好处在于,它更简单直观。所有的状态改变都只有唯一一个入口 this.setState(),Angular 就比较复杂,不知道背后使用了哪些黑魔法。 

同构的JavaScript 

单页面JS应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React对此有了解决方案。 

React可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。 

因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。 

缺点

React是目标是UI组件,通常可以和其它框架组合使用,目前并不适合单独做一个完整的框架。React 即使配上 redux 的组合,也不能称之一个完整的框架,比如你想用Promise化的AJAX?对不起没有,自己找现成的库去。而且第三方组件远远不如Angular多。目前在大的稳定的项目上采用React的,我也就只知道有Yahoo的Email。React本身只是一个V而已,所以如果是大型项目想要一套完整的框架的话,也许还需要引入Redux和route相关的东西。而Angular在这方面提供的东西比React多多了.

angular 

优点

AngularJS是一套完整的框架,angular有自带的数据绑定、render渲染、angularUI库,过滤器,directive(模板),服务q(defer),http,inject(依赖注入),factory,provider……,等等一系列工具,基本上只要你在做web开发用过的东西,它都有一个。但是这些东西React自身都没有。

Angularjs的架构清晰,分工明确,扩展性良好,model,view,controller谁在什么时候做什么事情说的很清楚,angular能够让程序员真正专注于业务逻辑,而且因为对html侵入不大,非常易于和designer协作。整个框架充满了DI的思路,耦合性非常低,对象都是被inject的,也就是说每个对象都可以轻易被替换而不影响其他对象。

Angular生产效率高,单向数据流什么的想法非常好,但是写起来太麻烦!我只想变更个很简单的数据还要经过action、dispatcher、reduce、view四步,angular里一行代码就搞定的事情在react里却如此麻烦

缺点

性能 

双向数据绑定是一把双刃剑。随着组件增加,项目越来越复杂,双向数据绑定带来性能问题。 

双向数据绑定是如何影响性能的?在JavaScript(ES5)中,并没有实现当变量或对象改变时发出通知的功能,Angular的实现方法被叫做“Dirty-checking(脏检查机制)”,通过跟踪数据的改变再动态更新用户界面(UI)。 

在Angular的作用域中任何操作的执行都会引发Dirty-checking,随着绑定数量的增加性能就会越低。 

Angular 2.0推翻重做使得目前不宜采用此框架 

Angular 1.x版本其实是个比较旧的东西了,现在看来有些理念过时了,比如依赖注入、自己独特的模块化,这些东西其实在ES6下已经很好地被解决了。 

Angular的2.0几乎是一个推翻重做的框架,估计不会有1.X的upgrade方案。所以如果现在新开始的项目采用Angular的话,会是一个很尴尬的时机。同样,如此大的改动似乎也反面印证了1.X并不是那么好。 

学习成本高 

使用Angular需要学习大量的概念,包括但不限于: 

模块 

控制器 

指令 

作用域 

模板 

链式函数 

过滤器 

依赖注入

vue,react 共性: 

虚拟dom实现快速渲染 

轻量级响应式组件 

服务端渲染易于集成路由工具,打包工具及状态管理工具

来自  https://www.jianshu.com/p/fec5e93158fd

Vue Angular React 全面对比,我们该选谁?

推荐使用:Vue.js > ReactJS > Angular 2 > AngularJS

 

 

概要:

现在, Vue 还没有 React (由 Facebook 维护) 或者 Angular 2 (受到 Google 的支持) 流行。不过,许多开发者都已经转向 Vue 了。Laravel 社区也在考虑将它作为可选用的前端框架之一。

总之,Vue 给 React & Angular 的弊病提供了一道良方,为你提供了一种更加简单和轻松的方法来编写代码。

满意度对比:

Hacker News (https://news.ycombinator.com/item?id=15999688)

前端框架 / 满意度

2016

2017

React

91%

93%

Vue 

91%

91%

Angular 2

65%

66%

Angular

40%

33%

                

1.首先,我们先了解什么是MVX框架模式?

      MVX框架模式:MVC+MVP+MVVM

      1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。

      2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。

      3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。

2.使用MVVM好处:

  1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。  
  2. 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。
  3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
  4. 可试性。可以针对ViewModel来对界面(View)进行测试。可以针对ViewModel来对界面(View)进行测试  


3.Vue.js是什么?

看到了上面的框架模式介绍,我们可以知道它是属于MVVM模式的框架。那它有哪些特性呢?

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue.js的特性如下:

1.轻量级的框架,易用

2.双向数据绑定

3.指令化

4.组件化

4.与angularjs的区别

    相同点:

都支持指令:内置指令和自定义指令。

都支持过滤器:内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

    不同点:

      1.更简单易用

AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

      2. 更灵活

比起 Angular更少专制,它能然你按照自己想要的方式构建应用,而非凡事非得 Angular 框架必须如此如此

      3.性能更突出

AngularJS依赖对数据做脏检查,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所

有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要

运行多次。 
Vue依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖

关系。唯一需要做的优化是在 v-for 上使用 track-by。做甚是2.0吸取的react的虚拟DOM的特性。

对于庞大的应用来说,这个优化差异还是比较明显的。

5.与React的区别

    相同点:

react采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,

两者都需要编译后使用。

中心思想相同:一切都是组件,组件实例之间可以嵌套。

都提供合理的钩子函数,可以让开发者定制化地去处理需求。

都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

在组件开发中都支持mixins的特性。

    不同点:

      1.性能更好:

Vue性能上更有优势,因为 Vue 的 Virtual DOM 实现相对更为轻量一些,整体大小比react.js更小更轻便

      2.更易学更简单: 
react.JS 彩用SX语法,对语大部分工程师入手比较困难,需要要大量的时间去学习适应这种新语法的形式,vue采用DOM模板的方法,易看易用

      3.优化更好:

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

Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身。

综上所述,在VUE.20更新以后。它更是吸取了 React 和 Angular 的教训,同时也吸收了它们的成功之处。我们看到的 Vue.js 是轻量级且容易学习掌握的新型mvvm框架。


Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。




来自 https://blog.csdn.net/ladymorgana/article/details/82144082

React、Angular、Vue.js:三者完整的比较指南

智能甄选

发布时间:18-08-2608:00

谈到框架,这些天你的选择差不多。在本文中,我们希望能够更轻松地做出决定。

选择技术堆栈有时会变成一项繁琐的任务,因为您需要考虑每个因素,包括预算,时间,应用程序大小,最终用户,项目目标和资源。

无论您是初学者,开发人员,自由职业者还是项目架构师形成策略,明智地决定每个框架的优缺点都是明智的。因此,这篇文章不会帮助您选择最好的文章,因为该决定取决于项目的范围和框架是否适合您的需求。但是,这篇文章可以帮助您更好地理解每个框架以及趋势和见解。

让我们开始吧

根据谷歌的趋势,看一下React与Angular与Vue.js的比较。

如果我们考虑过去一年,Angular似乎是赢家,React排在第二位,为Vue.js留下一小部分。

React vs. Angular vs. Vue

以下是一些可以帮助您更好地比较这些框架的问题:

它们是否足以构建可扩展的应用程序?是否很容易为每个框架找到开发人员?您是否了解此处列出的每个框架背后的核心概念?您是否分析过每个框架的性能,速度和学习曲线?有没有工具可以使用这些库开发应用程序?

让我们逐个找到每个问题的答案。

每个框架的历史

React是一个用于构建Web应用程序UI组件的JavaScript库。React由Facebook维护,许多领先的科技品牌在其开发环境中使用React。React被Facebook,Uber,Netflix,Twitter,Udemy,Paypal,Reddit,Tumblr,Walmart 等使用。来自Facebook的另一个受欢迎的企业React Native用于使用JavaScript和React构建本机移动应用程序。许多知名公司因其出色的特性和功能而转向React开发。该 阵营与Vue.js 主题也在网络上嗡嗡作响,为您提供了选择最佳框架的充分见解。

Angular是一个由Google支持的基于TypeScript的JavaScript框架。这是一个非常受欢迎的前端开发框架。Angular是作为Angular 2或Angular发布的,它构成了AngularJS(框架的第一个版本)的重写。

Angular开发在全球开发人员中广泛流行,并被谷歌,福布斯,WhatsApp,Instagram,healthcare.gov和许多财富500强公司等大型组织使用。

现在,来到Vue,Vue.js是讨论最多且发展最快的JavaScript框架之一。它由前谷歌员工Evan You创建,他在担任Google员工时曾在Angular工作过。您可以认为它是成功的,因为它能够使用HTML,CSS和JavaScript构建有吸引力的UI。Vue被阿里巴巴,GitLab,百度使用,并受到全球开发人员和设计师的赞赏。

人气和市场趋势

根据2017年Stackoverflow调查,Angular受到51.7%的开发者的喜爱,而React被66.9%的受访开发者所接受。React和Angular在流行的前端框架类别中具有几乎相同级别的用户。Vue没有在上述任何一个名单中占据一席之地,但有能力参加这场战斗。

现在,再看看GitHub上所有这三个框架评级的统计数据。

这个GitHub为Angular,React和Vue创作的明星历史展示了Vue.js在开发人员中的流行程度。目前,Vue有108086颗星,React获得106807 颗星,Angular获得 38654颗星。

如果我们观察上述统计数据,Vue.js似乎很受欢迎。尽管它是一个“单人秀”,但它有能力吸引开发人员的注意力,因为它结构精良且易于构建。

最重要的是,你不应该忘记Angular和React正被业界的大牌使用。Google在他们的项目中使用了Angular,Facebook,Airbnb,Dropbox,WhatsApp和Netflix等品牌正在其开发环境中使用React。

社区支持与增长

由于React由Facebook提供支持而Angular由Google维护,因此这两个框架的增长毫无疑问。在这两个框架中,更新和发布都经常发布,但在迁移时它们得到了很好的维护。根据React和Angular的开发人员的说法,升级不是问题,每六个月会有一次重大更新。Angular团队定期发布版本更新,发布和折旧期。

如果我们以这种方式考虑Vue.js,就会有一个迁移帮助工具,它使迁移变得更容易。但在大型应用程序中,它可能会导致问题,因为没有适当的路线图专注于版本控制和他们的计划。

React比Angular更灵活,因为Angular是一个完整的框架,React是一组独立,更快,不断发展的库,为此,你必须密切关注不再支持或维护的每个小模块。

找到开发人员很容易吗?

React涉及更多JavaScript,有时这也是人们面向Angular或Vue的原因。使用HTML更有意义,因为React具有不同的JSX语法--JavaScript XML。但是,它不需要在您的应用程序中使用JSX,但熟悉React的设置,环境和体系结构有点困难。

在这种情况下,Angular是一个非常好的选择。您可以轻松找到Angular开发人员,它拥有一个完善的社区,拥有大量项目,更新,资源,并且具有可持续发展的未来。

JSX还是HTML?你更喜欢什么?

这是一场无休止的讨论。Angular使用增强的HTML,而React更多地是关于JavaScript。请记住,所有这三个框架都是基于组件的。只要应用程序需要,您就可以重用组件。根据官方文档,如果我们谈论JSX,JSX既不是字符串也不是HTML。它允许开发人员创建React元素,它是JavaScript的语法扩展。

使用它有一个优势,因为JavaScript比HTML更强大,而且它是一种维护良好且成熟的语言,适用于前端开发。Vue与两个框架都不同。它分离了关注点,使开发人员能够以有序的方式编写样式,脚本和其他内容。对于熟悉HTML的初学者,设计师和经验丰富的开发人员来说,这听起来不错。

注意:您可以在Babel插件的帮助下在Vue中使用JSX。

框架?程序库?有什么不同?

Angular是一个框架,因为它为您提供了使用完整设置构建应用程序的良好开端。您无需查看库,路由解决方案和结构。你可以简单地开始建设。另一方面,React和Vue比Angular更灵活,更通用。

使用React,您可以进行多个集成,因为您可以将库与其他优秀工具配对,交换和集成。在这一点上,React开箱即用,因为它提供了无缝集成的灵活性,但是,这样做有更多的机会出错,它需要更多的依赖。

与这三个框架相比,Vue是最干净的。它可以帮助您在保持代码高效的同时实现内部依赖性和灵活性的完美平衡。它是一个非常简单,直接且易于使用的JavaScript框架,旨在简化Web开发。

您需要关注的其他重要事项

Angular涉及依赖注入,这是一个对象为另一个对象提供依赖关系的概念。这使代码更清晰,更容易理解。另一方面,有一个MVC模式将项目分成三个不同的组件 - 模型,视图和控制器。React没有任何这样的概念,它只用于构建应用程序的View,而Angular则基于MVC架构。

表现:哪个更好?

Virtual DOM模型在性能方面非常有用。React和Vue都有一个Virtual DOM。由于结构精良,Vue可提供出色的性能和内存分配。另一方面,React运作良好,Angular已经在竞争中领先。

性能取决于各种因素。这三个框架比其他JavaScript框架相对更快。您不应该考虑性能来得出结论,因为它主要依赖于应用程序的大小和代码的优化。

本机应用程序开发?可能?

原生应用程序是为特定平台构建的。React拥有React Native,您可以使用它为iOS和Android开发本机应用程序。Angular的NativeScript已经被很多人用来开发本机应用程序,而Ionic框架在制作混合应用程序时广受欢迎。

Vue的Weex平台正在不断发展,目前似乎还没有计划进一步发展,使其成为一个成熟的交叉开发平台。

哪个平台提供简单的学习曲线?

Angular和React有自己的方法来做事情,其中,Vue相当容易。许多公司正在转向Vue,因为它易于使用。在Angular或React中开发需要良好的JavaScript知识,您需要就第三方库做出很多决策。

如果您的应用程序很大并且在Vue中涉及大量代码,那么不仅编码,而且调试和测试可能是一个真正的问题,因为它允许您以老式的JavaScript方式构建应用程序。

Angular提供了非常丰富且清晰的错误消息,实际上可以帮助开发人员解决问题。

单向数据流与双向数据绑定

这是React和Angular之间的主要区别之一。双向数据绑定是指UI字段绑定到动态建模的机制。当UI元素发生变化时,模型数据也会相应地更改。另一方面,单向数据流意味着只有一个单一的事实来源 - 模型。应用程序的数据以单一方向流动,只有模型才能更改应用程序的状态。

单向数据流易于理解和确定,而双向数据绑定由于其复杂性而难以理解和实现。

现在,如果我们在这种情况下考虑我们的框架,Angular使用双向数据绑定,React用于单数据流,Vue支持两者。在这里,重点是,Angular的双向方法提供了有效的编码结构,开发人员发现它易于使用。React提供了更好的概述和理解,因为数据是在一个方向上管理的。

Mircoapps和微服务的崛起

科技界目前正在接受mircoapps和微服务。React和Vue都可以灵活地选择对应用程序很重要的东西。您只需将所需的库添加到React和Vue中的源代码中。Angular使用TypeScript,这就是为什么它更适合SPA而不是微服务。React和Vue都为开发微应用程序和微服务提供了更大的灵活性。

最后,我应该选择什么?

如果您比其他功能更喜欢灵活性,请使用React。

如果您喜欢在TypeScript中编码,请选择Angular。

如果您是JavaScript爱好者,请使用React,因为它完全与JavaScript有关。

如果您喜欢干净的代码,请在您的应用程序中使用Vue。

Vue提供最简单的学习曲线,是初学者的理想选择。

如果要在应用程序中分离关注点,请使用Vue。

如果您喜欢面向对象的编程,Angular绝对是您的选择。

Vue非常适合小型团队和小型项目。如果您的应用程序似乎很大并且具有重要的未来扩展计划,请选择React或Angular。

对于跨平台应用程序开发React Native是一个理想的选择,因为它提供了现代功能,您可以轻松地找到资源。另一方面,Angular需要良好的JavaScript知识才能构建大规模应用程序。

一个快速比较Angular vs. React vs. Vue

在这里,我们尽量不偏向于任何框架。无论技术或框架如何,我们都相信您的要求必须得到满足。如果我们遗漏了任何可以使本文更全面的重要观点或概念,您可以通过以下评论告诉我们!

来自  https://baijiahao.baidu.com/s?id=1609374985643812253&wfr=spider&for=pc



























普通分类: