资讯专栏INFORMATION COLUMN

Vue、React 和 Angular横向比对(数据对比)

fxp / 1038人阅读

摘要:同比与去年同期的同比变化率。我们对调查报告进行分析数据统计时间与本文时间差距较远,数据存在延后。这意味着你可以获得语法高亮,支持以及更容易使用预处理器如或。的是一个类似语法的可选预处理器,并可在中进行编译。

一些历史

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趋势

谷歌趋势

热度随时间变化的趋势

算法说明:数字代表相对于图表中指定区域和指定时间内最高点的搜索热度。热度最高的字词得 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 +
学习曲线 简单 中等 陡峭

基于组件:一个组件得到一个输入,并且在一些内部的行为/计算之后,它返回一个渲染的 UI 模板作为输出。定义的组件可以很容易在网页或其他组件中重用。

依赖标准:Vue 与 React 使用的都是 javaScript 语言标准,差别不大。Angular 是 javaScript 的超集,添加了可选的静态类型和基于类的面向对象编程;但与整个 JavaScript 语言相比,目前 TypeScript 的用户群仍然很小。

底层技术

Vue 具有“单个文件组件”。这似乎是对于关注分离的权衡 - 模板,脚本和样式在一个文件中,但在三个不同的有序部分中。这意味着你可以获得语法高亮,CSS 支持以及更容易使用预处理器(如 Jade 或 SCSS)。

React 的 JSX 是一个类似 HTML 语法的可选预处理器,并可在 JavaScript 中进行编译。因为代码写在同一个地方,所以可以在代码完成和编译时更好地检查。如果在 JSX 中输入错误时,React 将无法通过编译,它会打印出错的位置。

Angular 模板使用特殊的 Angular 语法(比如 ngIf 或 ngFor)来增强 HTML。虽然 React 需要 JavaScript 的知识,但 Angular 会迫使你学习 Angular 特有的语法。

数据绑定:当 UI 元素(例如,用户输入)被更新时,Angular 的双向绑定会改变 model 状态。Angular 的方式实现起来代码更干净,开发人员更容易实现。在 React 中实现该功能,必须先更新 model,然后渲染 UI 元素。React 的方式会有更好的数据总览,因为数据只能在一个方向上流动,这样更容易调试。

支持原生:Angular 拥有用于原生应用的 NativeScript(由 Telerik 支持)和用于混合开发的 Ionic 框架。借助 React,你可以试试 react-native-renderer 来构建跨平台的 iOS 和 Android 应用程序,或者用 react-native 开发原生 app。
Weex 允许你使用 Vue 语法开发不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用的组件。另一个选择是 NativeScript-Vue,一个用 Vue.js 构建完全原生应用的 NativeScript 插件。

服务端渲染:Javascript 框架在客户端上渲染页面。这对于性能,整体用户体验和 SEO 是不利的。服务器端预渲染是一个好办法。所有这三个框架都有相应的库来实现服务端渲染。React 有 next.js,Vue 有 nuxt.js,而 Angular 有...... Angular Universal。

浏览器兼容:

React兼容所有常用的浏览器,包括IE9及以上的版本。

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

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

学习曲线:

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,谢谢

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100474.html

相关文章

  • 介绍一项让 React 可以与 Vue 抗衡的技术

    摘要:明明如日中天,把它与倒过来,给加点东西或可与抗衡。在之后,大版本有十数个,只有最近推的才回归正常等后人总结历史,无疑会把与之间的所有都称为垃圾。让网页支持所见即得的可视化设计,是框架的最高形态,以前没有类似工具,主要因为技术做不到。 好吧,我承认我是标题党。React 明明如日中天,把它与 Vue 倒过来,给 Vue 加点东西或可与 React 抗衡。不过,这两年 Vue 干的正是这事...

    icattlecoder 评论0 收藏0
  • JavaScript 设计模式(五):迭代器模式

    摘要:文章内容分两部分前半部分为迭代器模式概念后半部分为中迭代器上半部分开始迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。下半部分开始的迭代器迭代器等同于遍历器。执行该函数,会返回一个遍历器对象。 showImg(https://segmentfault.com/img/bVbuyaZ?w=800&h=600); 文章内容分两部分: 前半部分为 迭...

    zhou_you 评论0 收藏0
  • 无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

    摘要:它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候,它就会直接重用完全相同的同时跳过比对。需要注意的是,中的操作必须是同步的,不可以存在异步操作的情况。 新增:哈哈,最近又推出了 vue 的文章,在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术,这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

    fish 评论0 收藏0
  • 无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

    摘要:它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候,它就会直接重用完全相同的同时跳过比对。需要注意的是,中的操作必须是同步的,不可以存在异步操作的情况。 新增:哈哈,最近又推出了 vue 的文章,在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术,这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

    30e8336b8229 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<