大概就在几年前，前端开发人员还在讨论是否应该在项目中使用Angualr还是React。然而从2018年开始，情况有了变化，越来越多的公司开始对Vue.js感兴趣，使用Vue.js的项目不断增长。2020年已然来到，这三个框架应该如何选择呢？这篇文章将会给正在决策的你一点点启发。

Angular、React 和 Vue框架的简单介绍

Angular

Angular由谷歌开发并于2010年首次发布。它是一个基于TypeScript的JavaScript框架。2016年，Angular2的发布发生了重大变化（并从最初的名称AngularJS中删除了“JS”）。Angular2+被称为Angular。尽管AngularJS（版本1）仍有更新，但我们将重点讨论Angular。最新的稳定版本是Angular9，于2020年2月发布。

Vue.js

Vue，又称Vue.js，是这三大框架中最年轻的成员。它是由前谷歌员工Evan You在2014年开发。在过去的三年里，尽管Vue没有大公司的支持，但它的人气却发生了巨大的变化。目前的稳定版本是2.6，于2019年2月发布（此后有一些小的增量发布）。Vue的贡献者得到了Patreon的支持。目前处于alpha阶段的Vue 3计划转移到TypeScript。

React

React由Facebook开发，最初于2013年发布。Facebook在其产品（Facebook、Instagram和WhatsApp）中广泛使用React。目前的稳定版本是16.X，发布于2018年11月（此后有较小的增量更新）。

三个框架的热度比较

由于“Angular”和“React”是常见的词汇，很难从谷歌趋势中把握它们的受欢迎程度。尽管如此，他们受欢迎的一个很好的代表是他们的GitHub存储库获得的星的数量。2016年年中，Vue的星数量发生了显著的变化，最近，Vue已经成为最受欢迎的框架之一。

GitHub中三个框架获得星星的比较

三个框架在就业市场中的比较

从2018年末的趋势来看，需要Angular技能或React技能的工作数量大致相同，而Vue的工作数量仍然只是这个数字的一小部分（约20%）。如果你严格地从当前就业市场的角度来看，你最好的选择是学会Vue或React。然而，鉴于Vue在过去三年中越来越受欢迎，使用Vue的项目或采用Vue的新项目可能需要一些时间才能达到要求更多开发人员的成熟度级别。

Angular、React 和 Vue框架的社区资源

现在你已经熟悉了这些框架的历史和趋势，我们将查看社区来评估这些框架的发展。我们已经看到，在过去的一年中，所有的框架都定期发布增量版本，这表明开发正在如火如荼地进行。

让我们看看Angular vs React vs Vue在GitHub存储库中的统计信息：

Angular vs React vs Vue在GitHub存储库中的统计信息

Vue有大量的观察者，星星和叉子。这显示了它在用户中的受欢迎程度以及在比较Vue与React时的价值。然而，Vue的贡献者数量低于Angular和React。

一种可能的解释是，Vue完全由开源社区推动，而Angular和React在谷歌和Facebook员工中占有相当大的份额，他们为代码库做出贡献。

Angular、React 和 Vue框架的迁移

在使用你选择的框架时，不必担心框架更新会出现并弄乱你的代码。尽管在大多数情况下，从一个版本到另一个版本不会遇到很多问题，但也要保持警惕，因为有些更新可能更重要，需要调整以保持兼容。

Vue计划每六个月更新一次。在任何主要的api被弃用之前还有六个月的时间，这给了你两个发布周期（一年）的时间来进行必要的更改。

谈到Vue和React，Facebook曾表示，稳定对他们来说至关重要，就像Twitter和Airbnb等大型公司的反应一样。通过版本升级通常是React中最容易的，React codemod等脚本可以帮助你迁移。

在常见问题解答的迁移部分中，Vue提到，如果从1.x迁移到2，则90%的API是相同的。控制台上有一个迁移帮助工具，可用于评估应用程序的状态。

Angular、React 和 Vue框架的使用

这里有几个重要的特性需要考虑，主要是总体大小和加载时间、可用组件和学习曲线。

总体大小和加载时间比较

库的大小如下：

Angular 4+：取决于产生的束尺寸

React：116 KB

Vue: 91KB

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

可用组件比较

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

• Angular

在Angular上，组件称为指令。指令只是DOM元素上的标记，Angular也可以跟踪和附加特定的行为。因此，Angular将组件的UI部分作为HTML标记的属性进行分离，并将它们的行为以JavaScript代码的形式进行分离。这就是它在观察角度和反应时的区别。

• React

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

• Vue

在Vue中，UI和行为也是组件的一部分，这使得查看Vue和React时更加直观。此外，Vue是高度可定制的，它允许你从脚本中组合组件的UI和行为。此外，你还可以在Vue中使用预处理器，而不是CSS，这是一个很好的功能。在与其他库（如引导）集成时，Vue非常棒。

学习曲线比较

• Angular

Angular有一个陡峭的学习曲线，考虑到它是一个完整的解决方案，掌握Angular需要学习相关的概念，如TypeScript和MVC。尽管学习角度感需要时间，但从理解前端工作原理的角度来看，投资是有回报的。

• React

React提供了一个入门指南，可以帮助您在大约一小时内建立React。该文档是很详细很完整的，对于堆栈溢出的常见问题已经有了解决方案。React不是一个完整的框架，高级功能需要使用第三方库。这使得核心框架的学习曲线不是那么陡峭，而是取决于您使用附加功能的路径。然而，学会使用React并不一定意味着你在使用最佳实践。

• Vue

Vue提供了更高的可定制性，因此比Angular或React更容易学习。此外，Vue与Angular有重叠，并对其功能（如组件的使用）有反应。因此，从两者中的任何一个过渡到Vue都是一个简单的选择。然而，Vue的简单性和灵活性是一把双刃剑——它允许糟糕的代码，使调试和测试变得困难。

Angular、React 和 Vue框架的总结

Angular是最成熟的框架，在贡献者方面有很好的支持，是一个完整的包。然而，学习曲线是陡峭的，角度开发的概念可能会拖累新的开发人员。对于拥有大型团队的公司和已经使用TypeScript的开发人员来说，Angular是一个不错的选择。

React已经到了成熟的年龄，并且有来自社区的大量贡献。它得到了广泛的接受。React的就业市场非常好，这个框架的未来看起来很光明。

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

Vue是最新的竞技场，没有大公司的支持。然而，在过去的几年里，它确实做得很好，成为一个强有力的角力和反应的竞争对手。在阿里巴巴和百度等许多中国巨头选择Vue作为主要的前端JavaScript框架的情况下，这可能起到了一定的作用。

然而，它在未来的表现还有待观察，人们有理由对此保持谨慎。如果您喜欢简单，但也喜欢灵活性，那么Vue应该是您的选择。

这些前端框架各有利弊。根据你正在进行的项目和你的个人需求，哪一个更合适。在做决定之前，做自己的研究总是很关键的，特别是如果你要做的是一个商业风险而不是个人项目。

有兴趣的朋友可用关注我，以后会有更多前端的文章奉上，谢谢。

閱讀更多 程序猿有話說 的文章

關鍵字: TypeScript 跳槽那 Facebook