React、Angular、Vue.js三者比较指南

Vue-React-Angular三者区别

 

1. 基本概念
Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。

React 是一个用于构建用户界面的 JavaScript 库

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. 三者比较
2.1 相同点
1. 都是基于javascript/typescript的前端开发库，为前端开发提供高效、复用性高的开发方式

2. 都有组件和模板的开发思想

3. 各自的组件都有生命周期，不用的组件可以卸载，不占用资源

4. 都支持指令，如样式、事件等的指令

2.2 不同点
1. 创始和发行不同：

Angular是由googl提供支持的，初始发行于 2016年9月；React由Facebook维护，初始发行于 2013年3月；Vue是由前google人员创建，初始发行于2014年2月

2. 应用类型不同：

Angular支持开发native应用程序、SPA单页应用程序、混合应用程序和web应用程序；React支持开发SPA和移动应用程序；Vue支持开发高级SPA，开始支持native应用程序

3. 模型不同

angular基于MVC（模型-视图-控制器）架构；react和vue是基于Virtual DOM（虚拟的文档对象模型）

4. 数据流流向不同

Angular使用的是双向数据绑定，React用的是单数据流的，而Vue则支持两者。

5. 对微应用和微服务的支持不同

Angular使用的是TypeScript，因此它更适合于单页Web应用（single page web application，SPA），而非微服务。相反，React和Vue的灵活性更适合微应用和微服务的开发。

6. 对原生应用的支持不同

React Native为iOS和Android开发原生应用；Angular的NativeScript已被原生应用所采用，特别是Ionic框架已经被广泛地运用在制作混合应用等方面；Vue的Weex平台正在开发之中，尚无下一步使之成为全面跨平台的计划。

7. 框架和库

Angular 是一个框架而不是一个库，因为它提供了关于如何构建应用程序的强有力的约束，并且还提供了更多开箱即用的功能。React 和 Vue 是一种库，可以和各种包搭配。

8. 组件之间传值方式不同

Angular 中直接的父子组件，父组件可以直接访问子组件的 public 属性和方法，也可以借助于@Input 和 @Output 进行通讯。没有直接关系的，借助于 Service 单例进行通讯；React 组件之间通过通过prop或者state来通信，不同组件之间还有Rex状态管理功能；Vue组件之间通信通过props ，以及Vuex状态管理来传值

React、Angular、Vue.js：对比

什么是Vue？

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue特性：

1. 模板和渲染函数的弹性选择

2. 简单的语法和项目配置

3. 更快的渲染速度和更小的体积四

4. 生命周期

什么是React？

React是一个用于构建用户界面的JavaScript库，所有React应用程序的核心都是组件。组件是一个自包含的模块，可以呈现一些输出，组件是可组合的。组件可能在其输出中包含一个或多个其他组件。

React的优点：

1、它提供最大的灵活性和响应能力。

2、由于它是基于文档对象模型，所以它允许浏览器友好地以HTML，XHTML或XML格式排列文档。

3、具有丰富的JavaScript库

4、具有很好的灵活的结构和可扩展性

5、React提供了React Native平台，可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。

React特性：

1. 单向绑定，先更新model,然后渲染UI元素，数据在一个方向流动，使得调试更加容易。代码冗余，各种生命周期太麻烦，刚开始接触好难记。

2. 用了虚拟DOM。（对虚拟DOM的理解刚开始我不是很理解概念，建议大家去看【深入REACT技术栈】这本书有很好的讲解）

3. 更适合大型应用和更好的可测试性

4. Web端和移动端原生APP通吃

5. 更大的生态系统，更多的支持和好用的工具

6. 组件生命周期

什么是Angular？

Angular是一个是一个用HTML，CSS和JavaScript / TypeScript构建客户端应用程序的开源Web应用程序框架。，由Google的Angular团队以及个人和公司社区领导。

Angular是建造AngularJS的同一个团队的完全重写。为了避免混淆，该团队宣布应该为每个框架使用单独的术语，其中“AngularJS”指的是1.X版本，而“Angular”指的是没有“JS”指的是版本2及更高版本。

Angular的优点

• Angular提供一个非常干净和维护的方式来创造单页的应用。

• Angular提供数据绑定功能在HTML中，从而给用户提供丰富和响应的体验

• Angular代码可进行单元测试。

• Angular使用依赖注入和利用关注点分离。

• Angular提供了可重用的组件。

• 使用Angular，开发人员编写更少的代码，并获得更多的功能。

• 在Angular中，视图都是纯HTML页面，并用JavaScript编写控制器做业务处理。

Vue和React和Angular的区别

1、vue.js更轻量，压缩后大小只有20K+, 但React压缩后大小为44k，Angular压缩后大小有56k，所以对于移动端来说，vue.js更适合；

2、vue.js更易上手，学习曲线平稳，而Angular入门较难，概念较多(比如依赖注入)，它使用java写的，很多思想沿用了后台的技术；react需学习较多东西，附带react全家桶。

3、vue.js吸收两家之长，借用了angular的指令(比如v-show,v-hide，对应angular的ng-show,ng-hide)和react的组件化(将一个页面抽成一个组件，组件具有完整的生命周期)

4、vue.js还有自己的特点，比如计算属性

	vue	React	angular
控制器	无	无	有
过滤器	无	无	有
指令	有	无	有
渲染指令	有	无	有
数据绑定	双向	单向	双向

以上就是Vue和React和Angular的区别是什么？的详细内容，更多请关注html中文网其它相关文章！

 

一、Vue.js：
其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。
Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。
Vue.js的特性如下：
　　 1.轻量级的框架
　　 2.双向数据绑定
　　 3.指令
　　 4.插件化

优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。
　　　　 2. 快速：异步批处理方式更新 DOM。
　　　　 3. 组合：用解耦的、可复用的组件组合你的应用程序。
　　　　 4. 紧凑：~18kb min+gzip，且无依赖。
　　　　 5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
　　　　 6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点： 1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
　　　　　2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
　　　　　3. 不支持IE8：

二、angularJS：
　　angularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
　　angularJS的特性如下：
　　　　1.良好的应用程序结构
　　　　2.双向数据绑定
　　　　3.指令
　　　　4.HTML模板
　　　　5.可嵌入、注入和测试

优点： 1. 模板功能强大丰富，自带了极其丰富的angular指令。
　　　　　 2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
　　　　 3. 自定义指令，自定义指令后可以在项目中多次使用。
　　　　　 4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
　　　　　 5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点： 1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
　　 2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
　　　　　 3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
　　　　 4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
　　　　 5. DI 依赖注入 如果代码压缩需要显示声明.

三、React：

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

React特性如下：　
　　　　1.声明式设计：React采用声明范式，可以轻松描述应用。
　　　　2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
　　　　3.灵活：React可以与已知的库或框架很好地配合。

优点： 1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
　　　　　 2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
　　　　　 3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
　　　　 　4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
　　　　　 5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
　　　　　 6. 兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点： 1. React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

----------------------------------------------------------

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没有在上述任何一个名单中占据一席之地，但有能力参加这场战斗。

目前，Vue有108086颗星，React获得106807 颗星，Angular获得 38654颗星。

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

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

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

 

react和react native的区别是：

1、框架作用的平台不同；2、工作原理有差别；3、渲染周期不同；4、react native中所有元素都会被平台指定的react组件替换；5、宿主平台的API不同。

区别如下：

1、框架作用的平台不同

RN是由React衍生出来的，两种框架都是用JSX开发语法，但是RN是用来开发真正原生渲染的iOS和Andriod移动应用的JS框架，而React是将浏览器作为渲染平台。

2、工作原理的差别

Virtual DOM是介于开发者描述的视图与实际在页面上渲染的视图之间。在浏览器上如果想渲染出来可交互的用户界面，开发者必须操作浏览器的文档对象（document object model），Virtual DOM的出现，就是为了节省这部分操作所消耗的性能。

但是Virtual DOM的巨大潜力，是在于这个抽象层，可以带来很多可能性。

React Native的工作原理，就是调用Objective-C的API去渲染iOS组件，调用Java API去渲染Android组件，而不是渲染到DOM上。桥接使得React可调用宿主平台开放的UI组件，React组件通过render方法返回了描述界面的标记代码。如果是web平台，React最终把标记代码解析成浏览器的DOM；而在React Native中，标记代码会解析成特定平台的组件，例如<View>会表现成iOS平台上的UIView。

3、渲染周期

React的渲染周期开始于react组件挂载到DOM之后，接着React进入渲染周期并根据需要渲染组件。在渲染阶段，React将开发者在return中返回的HTML标记直接按需渲染到页面上。

React Native生命周期与React基本相同，在渲染上因为React Native依赖于桥接，并不在UI主线程运行，它可以在不影响用户体验的前提下执行这些异步调用。

4、创建组件

当编写Web环境的React的时候，视图最终需要渲染成普通的HTML元素；而在React Native中，所有元素都会被平台指定的React组件替换，例如在iOS中，<View>组件被渲染成UIView，而在Android平台，会被渲染成View。

UI元素均为React的组件，而不是像<div>这样基础的html元素，因此在使用每一个组件的时候，都需要显式的导入，例如：

1	import { DatePickerIOS } from 'react-native';

5、原生的样式

在Web中，使用CSS样式为React组件添加样式已经是开发过程中不可获取的一部分了。React通常不影响我们编写CSS的方式，并且它确实让样式的动态创建更加容易（通过state和props），除此之外，React基本上不关心我们如何处理样式的。

非Web平台上有大量的方法来处理布局和样式，我们使用React Native时，只需要用一种标准的方法来处理样式，React和宿主平台之间的桥接包含了一个缩减版CSS子集的实现，这个CSS子集主要通过flexbox进行布局，做到了尽量简化，而不是去实现所有的CSS规则。有别于Web平台，CSS的支持程度因浏览器而不同，React Native则做到了样式规则的一致。

6、宿主平台API

使用Web 环境的React 与React Native 最大的不同，在于宿主平台的API。

在Web 中，我们通常要处理采纳标准的不一致和碎片化所引起的问题，并且大多数浏览器只支持部分核心的特性。然而在React Native 中，平台特定的API 在提供优秀原生的用户体验方面发挥了巨大的作用。当然，要考虑的方面还有很多。API 囊括了许多功能，从数据存储到地理服务，以及操控硬件设备（如摄像头）等。非常规平台上的API 会更有趣，例如，React Native 和虚拟现实头盔之间的API 会是什么样的呢？

默认情况下，iOS 和Android 版本的React Native 支持许多常用的特性，甚至可以支持任何异步的本地API。React Native 让宿主平台API 的使用变得更加简单和直观，你可以在其中自由地试验。同时，务必思考一下怎样做才符合目标平台的体验，并在心里设计好交互过程。毋庸置疑，React Native 的桥接不可能暴露宿主平台全部的API。

如果你需要使用一个未支持的特性，完全可以自己动手添加到React Native 中。另外，如果其他人已经集成，那就更好了，所以应该及时查看社区中的实现。值得注意的是，使用平台API 也会对代码复用有帮助。同时，实现平台特定功能的React组件也是平台特定的。

隔离和封装这些组件将会给你的应用带来更大的灵活性。当然，这对你开发Web 应用同样奏效，如果你想共享React 和React Native 的代码，请记住像DOM 这样的API 在React Native 中并不存在。

react native和react的区别

原理略有不同：

React和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。只不过React是驱动html dom渲染； React Native是驱动android/ios原生组件渲染。其实在React Native推出之前，就已经存在这种使用js驱动app原生组件的技术了，比如Native Script。

编程思路会有所不同：

react 直接渲染dom，而react native生成id，用bridge（最新用c++实现了）变成一个表，等待 native 去调用，写react可以用前端知识直接上手，react native虽然也可以，但是深入下去没有native知识支持很难。

(1)，React Js的目的是为了使前端的V层更具组件化，能更好的复用，它能够使用简单的html标签创建更多的自定义组件标签，内部绑定事件，同时可以让你从操作dom中解脱出来，只需要操作数据就会改变相应的dom。

(2)，React Native的目的是希望我们能够使用前端的技术栈就可以创建出能够在不同平台运行的一个框架。可以创建出在移动端运行的app，但是性能可能比原声app差一点。