跳转到主要内容
Chinese, Simplified

大约一年前,开发人员主要讨论是否应该将Angular或React用于他们的项目。 但是在2018年的过程中,我们看到了对第三个名为Vue.js的玩家的兴趣增长。 期待2019年,这篇文章是一个全面的指南,也许是适合你的解决方案:Angular vs React vs Vue。

如果您是开发项目的开发人员而无法决定使用哪个JavaScript框架,那么本指南应该可以帮助您做出决定。

我们将介绍Angular,Vue和React的各个方面,以了解它们如何满足您的需求。 这篇文章不仅仅是Angular vs React vs Vue的指南,而是旨在提供一个结构来帮助判断前端JavaScript框架。 如果新框架明年到来,您将确切知道要查看的参数!

*在这篇文章中,我们假设您具有JavaScript的基本知识,并且也使用了JavaScript框架。

第1部分:Vue vs React与Angular的简史


在我们进入技术细节之前,让我们先谈谈这些框架背后的历史 - 只是为了更好地理解他们的哲学及其随时间的演变。

How it all started ?

 

angular logo

由Google开发的Angular于2010年首次发布,使其成为最古老的。 它是基于TypeScript的JavaScript框架。 2016年Angular 2的发布发生了重大转变(以及原来名称中的“JS”的丢弃 -  AngularJS)。 Angular 2+被称为Angular。 虽然AngularJS(版本1)仍然有更新,但我们将重点讨论Angular。 最新的稳定版本是Angular 7,于2018年10月发布。

 

 

vue logo

Vue,也称为Vue.js,是该组中最年轻的成员。 它是由前谷歌员工Evan You在2014年开发的。在过去两年中,Vue的受欢迎程度大幅下降,尽管它没有大公司的支持。 目前的稳定版本是2.17,于2018年8月发布.Vue的贡献者得到了Patreon的支持。 目前处于原型设计阶段的Vue 3计划转向TypeScript。

 

 

react logo

由Facebook开发的React最初于2013年发布.Facebook在其产品(Facebook,Instagram和WhatsApp)中广泛使用React。 目前在16.X的稳定版本,于2018年11月发布。

以下是Angular vs React vs Vue的简短摘要,包括它们的状态和历史:

Angular vs React vs Vue的历史

The history of Angular vs React vs Vue
  Angular React Vue
Initial release 2010 2013 2014
Official site angular.io reactjs.org vuejs.org
Approx. size (KB) 500 100 80
Current version 7 16.6.3 2.17
Used by Google, Wix Facebook, Uber Alibaba, GitLab

许可证?♂️


在使用开源框架之前,请确保通过其许可证。 有趣的是,所有三个框架都使用MIT许可证,即使在专有软件中,也会对重用提供有限的限制。 在使用任何框架或软件之前,请确保您了解许可证的含义。

以下简单的英文术语是MIT许可证的快速摘要。

...

人气?


由于“有角度”和“反应”是常用词,因此很难从Google趋势中了解它们的受欢迎程度。 虽然,他们受欢迎的一个很好的代表是他们的GitHub存储库获得的明星数量。 Vue的明星数量突然发生变化发生在2016年中期,最近,Vue一直在那里,React是最受欢迎的框架。

Stars on GitHub Projects for Angular vs React vs Vue

Angular,React和Vue的GitHub项目中的星数


让我们来看看Angular vs React vs Vue的就业市场情况,这也是衡量人气的一个很好的指标:
...

Angular vs React与Vue?♂️的就业市场


表明就业市场趋势的最佳数据来源是各种工作委员会。

从2018年末的趋势可以看出,需要Angular或React技能的工作数量大致相同,而Vue的工作数量仍然只是这个数字的一​​小部分(约20%)。这份清单绝对不是详尽无遗的,但可以很好地描述整个科技行业。

如果您从目前的就业市场的角度严格看待,最好的办法是学习Angular或React。但是,鉴于Vue在过去两年中越来越受欢迎,项目可能需要一些时间才能使用Vue,或者采用Vue的新项目达到成熟度级别,这些项目需要更多的开发人员。

第2部分:社区和发展


现在您已熟悉每个框架的历史和趋势,我们将查看社区以评估这些框架的开发。我们已经看到,对于所有框架,过去四个月都发布了一个主要版本,这表明开发正在全面展开。

让我们看看Angular vs React vs Vue关于GitHub存储库的统计信息:

  Angular React Vue
# Watchers 3.3k 3.7k 5.7k
# Stars 43k 71k 122k
# Forks 11k 16k 17k
# Commits in last month 446 339 81
# Contributors 798 1.8k 240

Vue拥有大量的观察者,明星和分叉。这表明它在用户中的受欢迎程度及其在比较Vue与React时的价值。但是,Vue的提交和贡献者数量低于Angular和React。

一种可能的解释是,Vue完全由开源社区驱动,而Angular和React在Google和Facebook员工中占有很大比例,为存储库做出了贡献。

从统计数据来看,这三个项目都显示出重要的开发活动,这在将来肯定会继续下去 - 只是这些统计数据不能成为不决定使用其中任何一项的基础。

第3部分:迁移


当您使用您选择的框架时,您不必担心框架更新会出现并弄乱您的代码。虽然在大多数情况下你不会遇到从一个版本到另一个版本的许多问题,但重要的是要注意脉冲,因为一些更新可能更重要,需要调整以保持兼容性。

Angular计划每六个月进行一次重大更新。在任何主要API被弃用之前还有六个月的时间段,这使您有两个发布周期(一年)的时间来进行必要的更改(如果有的话)。

谈到Angular vs React,Facebook表示稳定性对他们来说至关重要,因为像Twitter和Airbnb这样的大公司使用React。通过版本升级通常是React中最简单的,使用react-codemod等脚本可以帮助您进行迁移。

在迁移的FAQ部分中,Vue提到如果从1.x迁移到2,则90%的API都是相同的。有一个迁移帮助工具可以在控制台上运行,以评估应用程序的状态。

第4部分:使用Vue与Angular vs React


这里有一些重要的特征,主要是整体尺寸和加载时间,可用组件和学习曲线。

大小和加载时间⏲️


库的大小如下:

  • Angular: 500+ KB
  • React: 100 KB
  • Vue: 80 KB


尽管框架的大小存在显着差异,但与平均网页大小(2018年的2 + MB)相比,它们仍然很小。此外,如果您使用流行的CDN加载这些库,则很可能用户已将库加载到其本地系统中。

...

组件?️


组件是所有三个框架的组成部分,无论我们是在谈论Vue,React还是Angular。组件通常获取输入,并根据它更改行为。此行为更改通常表现为页面某些部分的UI更改。组件的使用使得重用代码变得容易。组件可以是电子商务站点上的购物车或社交网络上的登录盒。

Angular Angular:
在Angular中,组件称为指令。指令只是DOM元素的标记,Angular也可以跟踪和附加特定的行为。因此,Angular将组件的UI部分分离为HTML标记的属性,以及它们以JavaScript代码形式的行为,这就是在查看Angular vs React时将其区分开来的原因。


React React:
有趣的是,React结合了UI和组件的行为。例如,下面是在React中创建hello world组件的代码。在React中,代码的相同部分负责创建UI元素并指示其行为。


Vue Vue:
在Vue中,UI和行为也是组件的一部分,这使得在查看Vue vs React时更加直观。此外,Vue是高度可定制的,它允许您在脚本中组合UI和组件的行为。此外,您还可以在Vue中使用预处理器而不是CSS,这是一项很棒的功能。在与其他库(如Bootstrap)集成时,Vue非常棒。


为了比较同一个应用程序在不同库中的外观,这里有一篇关于在React和Vue上创建相同的待办事项列表应用程序以及对比两个框架的差异的精彩帖子。

...

学习曲线?


那么学习这些框架有多难?

Angular Angular:
Angular有一个陡峭的学习曲线,考虑到它是一个完整的解决方案,掌握Angular需要你学习像TypeScript和MVC这样的相关概念。尽管学习Angular需要时间,但投资在理解前端如何运作方面会产生效益。


react React:
React提供了一个入门指南,可以帮助您在大约一小时内设置React。文档是彻底和完整的,可以解决StackOverflow上已经存在的常见问题。 React不是一个完整的框架,高级功能需要使用第三方库。这使得核心框架的学习曲线不那么陡峭,但取决于您使用其他功能所采用的路径。但是,学习使用React并不一定意味着您正在使用最佳实践。


vue Vue:
Vue提供更高的可定制性,因此比Angular或React更容易学习。此外,Vue与Angular和React在功能方面有重叠,就像使用组件一样。因此,从两者中的任何一个过渡到Vue都是一个简单的选择。然而,Vue的简单性和灵活性是一把双刃剑 - 它允许糟糕的代码,使得调试和测试变得困难。
尽管Angular,React和Vue具有重要的学习曲线,但它们在掌握时的用途是无限的。例如,您可以将Angular和React与WordPress和WooCommerce集成,以创建渐进式Web应用程序。

 

Angular vs React vs Vue:谁赢了?


在这篇文章的最后,让我们回顾一下每个框架的特征,试图回答这个问题:Angular vs React vs Vue:你应该选择哪一个?

angular logoangular 是最成熟的框架,在贡献者方面有很好的支持,是一个完整的包。

然而,学习曲线陡峭,Angular的开发概念可能会推迟新的开发人员。

对于拥有大型团队和已经使用TypeScript的开发人员的公司而言,Angular是一个不错的选择。

额外?以下是您可能感兴趣的一些Angular管理信息中心模板。

 

 

react logoReact已经足够成熟并且拥有来自社区的大量贡献。它正在获得广泛认可。 React的就业市场非常好,这个框架的未来看起来很光明。

对于开始使用前端JavaScript框架,初创公司和喜欢灵活性的开发人员而言,React看起来是个不错的选择。与其他框架无缝集成的能力为那些希望在代码中具有一定灵活性的人提供了极大的优势。

 

vue logovue 是竞技场的新手,没有大公司的支持。

然而,在过去的几年里,它作为Angular和React的强大竞争对手取得了很好的成绩。这可能是很多中国巨头如阿里巴巴和百度选择Vue作为他们的主要前端JavaScript框架。

但是,未来它的作用还有待观察,并且有理由谨慎对待它。如果您喜欢简单,也应该像灵活性一样,Vue应该是您的选择。

额外?以下是一些您可能感兴趣的使用Bootstrap构建的Vue管理模板。

 

Angular vs React vs Vue辩论的答案是,没有绝对正确的选择,你可能已经预料到了。

这些库中的每一个都有其自身的优点和缺点。根据您正在进行的项目以及您的个人要求,其中一项将比其他项目更合适。在决定之前进行自己的研究始终是关键,特别是如果你打算从事商业活动而不是个人项目。

 

原文:https://www.codeinwp.com/blog/angular-vs-vue-vs-react/

本文:

讨论:请加入知识星球或者小红圈【首席架构师圈】

Article
知识星球
 
微信公众号
 
视频号