Angular vs Vue vs React

近年来Angular、Vue、React是最受欢迎的前端三大框架。个人认为没有哪个是更好的,只有更适合当前项目和团队的。

我们先从以下几方面来看这三大框架:

  • 简介
  • 生态
  • 学习曲线

简介

angular

Angular

Angular是一个成熟的前端框架,由谷歌开发,于2010年首次发布,是最古老的JavaScript框架。它是基于typescript的JavaScript框架。

2016年,Angular 2发布时发生了重大的变化(从原来的名字AngularJS中去掉了JS),Angular 2+被称为Angular。尽管AngularJS(版本1)仍在更新,但本文主要讨论Angular。最新的稳定版本是Angular 11,于2020年11月发布。

每半年会有大版本的更新,然后再过半年就会弃用旧版本的API,所以开发者可以有一年的时间去升级迁移。

vue

Vue

Vue也被称为Vue.js,是一个渐进式的框架,是三大框架中最年轻的。它是由谷歌前员工Evan You在2014年开发的。在过去的三年里,尽管没有大公司的支持,Vue的受欢迎程度已经发生了巨大的变化。

目前的稳定版本是3.0,于2020年9月发布(之后有一些小的增量版本)。需要注意的是,Vue 3现在已经在它自己的GitHub repo中了,也支持TypeScript(是否使用TypeScript是可选的)。

在Vue 3迁移文档中,提到Vue 2和Vue 3之间有很多相同之处,迁移相对简单,迁移工具还未发布。
注: IE11支持仍未解决

如果从Vue 1迁移Vue 2,则90%的API是相同的,并提供了Vue 1到Vue 2迁移助手工具vue-migration-helper

react

React

React是一个UI库,由Facebook开发,最初于2013年发布。Facebook在其产品(Facebook、Instagram和WhatsApp)中广泛使用React。目前的稳定版本是v17,于2020年10月发布,此后有较小的增量更新。

V17并无太多新增特性,而是一个过渡版本,为了后续能兼容 v18版本,或者说是为了能达到”逐步“升级的目的,这也能规避当项目的依赖存在多个版本React时出现问题。

Facebook表示,稳定性对他们来说至关重要,因为Twitter和Airbnb等大公司都在使用React。在React中,升级版本是最简单的,使用React codemod之类的脚本可以帮助进行迁移。

Star history

star的增长历史图上来看,vue虽然是最年轻的,但是近年来Vue已经超越React,成为最热门的。国内很多大厂,比如阿里、百度,都选择Vue作为他们的主要前端框架。

生态

Angular

  • 状态管理
    NgRx,它的灵感来自Redux,但它是专门为Angular创建的。

  • 组件库
    有许多现成的组件可以导入到项目中。其中Angular Material是谷歌的一个官方项目,为Angular提供Material组件。

  • 跨平台
    在Angular中使用NativeScript可以构建跨平台移动应用。它也支持Vue,但对Angular的支持更为成熟。

    Angular全家桶

  • 测试
    单元测试: Jasmine, Karma, JestMocha, Siesta
    组件测试: Jasmine, Karma
    E2E测试: Protractor, Cypress, Nightwatch.js

Vue

  • 状态管理
    VueX是专门为Vue创建的官方状态管理库,除了可以很好地与Vue集成外,使用Vue的开发工具也很容易进行调试。
    另外可以在Vue中使用Redux,不过没有正式的绑定。

  • 组件库
    随着社区的发展,可以使用各种各样的输入组件和高级元素来加快开发速度。
    社区较受欢迎并已支持Vue3.0的UI组件库:
    - Vuetify
    - ElementUI
    - Vant
    - Ant Design

  • 跨平台
    在移动应用开发方面,除了前面提到的NativeScript,还有有一个叫做Weex的平台。Weex是阿里巴巴开发和使用的,但它不像React Native那么成熟和强大。

  • 测试
    单元测试: JestMocha
    组件测试:Vue Testing Library (@testing-library/vue)Vue Test Utils , Cypress
    (注: 如果是新手,建议使用Vue Testing Library,它是对Vue Test Utils的抽象,更容易上手)
    E2E测试: Cypress.io, Nightwatch.js, Puppeteer, TestCafe

React

  • 状态管理
    最流行的状态管理是React官方绑定的Redux,由Redux团队维护。当然,复杂度不高的项目也可以直接使用Context+Hooks。

React全家桶
redux, react-redux, immutable.js, redux-actions, redux-saga,react-router

学习曲线

Possible Learning Curve
  • Angular
    完整和成熟的解决方案,需要学习理解TypeScript、MVC以及前端如何工作等,学习曲线陡。适合大型项目和有TypeScript经验的开发者。

  • Vue
    提供了更高的可定制性,灵活,因为和其他二者有重叠的,从Angular和React过渡到Vue,学习起来就较简单。但是因为太灵活也是一把双刃剑,可以容忍难以维护的代码,也很难调试。如果喜欢简单性,但也喜欢灵活性,那么Vue应该是你的选择。

  • React
    成熟但是不是完整解决方案,有大量社区支持,高级特性需要使用第三方库需要依赖第三方库,核心功能学习曲线不那么陡,主要看第三方库的学习曲线。适合前端初学者。

总结

Angular vs React vs Vue

虽然三大框架有着很多的不同,当也有一些相似的地方。比如Vue与React,都在使用 Virtual DOM,支持本地渲染,性能都很好,同样都提供了响应式组件;Angular和Vue都使用了指令;React与Angular两者的社区基础都很好;Angular、Vue、React都支持PWA。

三大框架各有优劣,无论哪一种方案都比较成熟。在选取哪个框架更合适当前项目和团队,除了考虑它们的特性、迁移、生态、学习曲线外,还要考虑项目特性、团队规模、团队实力等。

如果是开发小程序,那么Vue是最优的选择。
如果是小团队,想要快速上线一个产品,也推荐Vue。
如果是大型团队,开发一个长期项目,综合来看,更推荐React。
如果是中大型团队,团队综合实力比较高,则可以尝试Angular。

希望本文对你进行项目选型有所帮助。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355

推荐阅读更多精彩内容