Vue、React 和 Angular横向比对（数据对比）

---

一些历史

Angular 是基于 TypeScript 的 Javascript 框架。由 Google 进行开发和维护，它被描述为“超级厉害的 JavaScript MVW 框架”。Angular（也被称为 “Angular 2+”，“Angular 2” 或者 “ng2”）已被重写，是与 AngularJS（也被称为 “Angular.js” 或 “AngularJS 1.x”）不兼容的后续版本。当 AngularJS（旧版本）最初于2010年10月发布时，仍然在修复bug，等等 —— 新的 Angular（sans JS）于 2016 年 9 月推出版本 2。最新的主版本是 4，由于版本 3 被跳过了。

React 被描述为 “用于构建用户界面的 JavaScript 库”。React 最初于 2013 年 3 月发布，由 Facebook 进行开发和维护，Facebook 在多个页面上使用 React 组件（但不是做为单页应用程序）。

Vue 是 2016 年发展最为迅速的 JS 框架之一。Vue 将本身描述为一款“用于构建直观，快速和组件化交互式界面的 MVVM 框架”。它于 2014 年 2 月首次由 Google 前员工 Evan You 发布。

背景对比

对比	Vue	React	Angular
出现年月	2014-2	2013-3	2010-10
框架类型	MVVM	MVC	MVW
开源许可	MIT license	BSD3-license	MIT license

• MIT许可协议（The MIT License）是许多软件许可条款中，被普遍使用的其中一种。与其余常见的软件许可协议（如GPL、LGPL、BSD）相比，MIT是相对宽松的软件许可协议。
• BSD 许可协议（Berkeley Software Distribution license），是自由软件中使用最普遍的许可协议之一。BSD 就是遵守这个许可证来发布，也所以而得名 BSD 许可协议。

MIT license 与 BSD-license 之间的区别是：MIT license 容许衍生软件加上咱们本身的名字作推广，而 BSD license 不能够。

---

开发对比

	Vue	React	Angular
开发与维护	独立开发者	Facebook	Google
团队人数	25	未知	40

---

GitHub Stats

	stars	forks	issues	updated	created
angular.js	59308	29000	487	Dec 18, 2018	Jan 6,2010
Vue	122678	17540	230	Dec 20, 2018	Jul 29,2013
React	117977	21403	525	Dec 20, 2018	May 25,2013
angular	43663	11223	2618	Dec 20, 2018	Sep 19,2014

统计的数据有时效性，如需了解最新的数据点我

---

流行度对比

国内流行度

百度指数上的一个比较

搜索指数：指的是关键词最近一个月的整体搜索指数表现。

• 日均值：一段时间内搜索指很多天均值。

• 同比：与去年同期的同比变化率。

• 环比：与上一个相邻时间段（即上一个7天/30天）的环比变化率。

搜索指数趋势：互联网用户对键词搜索关注程度及持续变化状况。

• 算法说明：以网民在百度的搜索量为数据基础，以关键词为统计对象，科学分析并计算出各个关键词在百度网页搜索中搜索频次的加权。

国外流行度

• npm趋势

• 谷歌趋势

• 1. 热度随时间变化的趋势
• 算法说明：数字表明相对于图表中指定区域和指定时间内最高点的搜索热度。热度最高的字词得 100 分；热度是前者一半的字词得 50 分；没有足够数据的字词得 0 分。

2. 按区域比较细分数据

• stackoverflow

  Stack Overflow 是一个与程序相关的 IT 技术问答网站。该网站拥有 400 万用户，每个月 5.6 亿的页面浏览量。

  咱们对 Stack Overflow 2018 调查报告 进行分析（数据统计时间与本文时间差距较远，数据存在延后）。

  • 目前最流行的技术框架排名：

Angular 与 React 排名靠前，Vue 未上榜。

* 目前你们最喜好的技术框架排名：

相对 Angular 来讲，React 的表现很抢眼，Vue 未上榜。

• statejs

  statejs 网站使用了一套包含上百个问题的问卷调查，从超过 20000 名开发者中得出的 2018 年关于前端框架调查，结果 以下：

较多开发者想学 Vue，而 React 目前拥有最多的开发者。

总结：国内 流行 Vue，国外流行 React。

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

技术对比

对比	Vue	React	Angular
基于组件	擅长	擅长	-
依赖标准	ES6 或 ES6	ES6	TypeScript
底层技术	单个文件（模板+脚本+样式）	JSX	模板
数据绑定	单/双向绑定	单向绑定	双向绑定
支持原生开发	支持（Weex）	支持（react-native/react-native-renderer）	支持（NativeScript、Ionic）
服务端渲染	nuxt.js	next.js	Angular Universal
浏览器兼容	ie8 +	ie9 +	ie9 +
学习曲线	简单	中等	陡峭

1. 基于组件：一个组件获得一个输入，而且在一些内部的行为/计算以后，它返回一个渲染的 UI 模板做为输出。定义的组件能够很容易在网页或其余组件中重用。
2. 依赖标准：Vue 与 React 使用的都是 javaScript 语言标准，差异不大。Angular 是 javaScript 的超集，添加了可选的静态类型和基于类的面向对象编程；但与整个 JavaScript 语言相比，目前 TypeScript 的用户群仍然很小。

3. 底层技术

   • Vue 具备“单个文件组件”。这彷佛是对于关注分离的权衡 - 模板，脚本和样式在一个文件中，但在三个不一样的有序部分中。这意味着你能够得到语法高亮，CSS 支持以及更容易使用预处理器（如 Jade 或 SCSS）。
   • React 的 JSX 是一个相似 HTML 语法的可选预处理器，并可在 JavaScript 中进行编译。由于代码写在同一个地方，因此能够在代码完成和编译时更好地检查。若是在 JSX 中输入错误时，React 将没法经过编译，它会打印出错的位置。
   • Angular 模板使用特殊的 Angular 语法（好比 ngIf 或 ngFor）来加强 HTML。虽然 React 须要 JavaScript 的知识，但 Angular 会迫使你学习 Angular 特有的语法。
4. 数据绑定：当 UI 元素（例如，用户输入）被更新时，Angular 的双向绑定会改变 model 状态。Angular 的方式实现起来代码更干净，开发人员更容易实现。在 React 中实现该功能，必须先更新 model，而后渲染 UI 元素。React 的方式会有更好的数据总览，由于数据只能在一个方向上流动，这样更容易调试。
5. 支持原生：Angular 拥有用于原生应用的 NativeScript（由 Telerik 支持）和用于混合开发的 Ionic 框架。借助 React，你能够试试 react-native-renderer 来构建跨平台的 iOS 和 Android 应用程序，或者用 react-native 开发原生 app。
   Weex 容许你使用 Vue 语法开发不只仅能够运行在浏览器端，还能被用于开发 iOS 和 Android 上的原生应用的组件。另外一个选择是 NativeScript-Vue，一个用 Vue.js 构建彻底原生应用的 NativeScript 插件。
6. 服务端渲染：Javascript 框架在客户端上渲染页面。这对于性能，总体用户体验和 SEO 是不利的。服务器端预渲染是一个好办法。全部这三个框架都有相应的库来实现服务端渲染。React 有 next.js，Vue 有 nuxt.js，而 Angular 有...... Angular Universal。

7. 浏览器兼容：

   • React兼容全部经常使用的浏览器，包括IE9及以上的版本。

     注意：咱们不支持那些不兼容ES5方法的老版浏览器，但若是你的应用包含了polyfill，例如es5-shim 和 es5-sham，你可能会发现你的应用仍然能够在这些浏览器中正常运行。若是你选择这么干，你就只能孤军奋战了。

   • Vue 不支持 IE8 及如下版本，由于 Vue 使用了 IE8 没法模拟的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的浏览器。

8. 学习曲线：

   • Angular 的学习曲线是很是陡峭的——做为一个框架，它的 API 面积比起 Vue 要大得多，你也所以须要理解更多的概念才能开始有效率地工做。固然，Angular 自己的复杂度是由于它的设计目标就是只针对大型的复杂应用；但不能否认的是，这也使得它对于经验不甚丰富的开发者至关的不友好。
   • 对于 React，你可能须要针对第三方库进行大量重大决策。仅仅 React 中就有 16 种不一样的 flux 软件包来用于状态管理可供选择。

   • Vue，你只须要有良好的 HTML 和 JavaScript 基础。有了这些基本的技能，你就能够很是快速地经过阅读 指南 投入开发

     ---

体积和性能

体积

任何框架都不会十全十美：Angular 框架很是臃肿。gzip 文件大小为 143k，而 Vue 为 23K，React 为 43k。

为了提升性能，React 和 Vue 都使用了虚拟 DOM（Virtual DOM）。

性能

Angular，React 和 Vue 性能比较（源文件）

内存分配

内存分配（源文件）

总结一下：Vue 有着很好的性能和高深的内存分配技巧。若是比较快慢的话，这些框架都很是接近（好比 Inferno）。请记住，性能基准只能做为考虑的附注，而不是做为判断标准。

---

本文首发于github，若是对你有帮助，能够给我点个star，谢谢