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那么成熟和强大。

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

• Vue 全家桶
  - vue
  - vuex
  - vue-router
  - vue rescoure
  - webpack

React

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

• 组件库
  Material UI
  Ant design
  由于React的流行，查找组件和随时可用的元素非常容易。

• 跨平台
  React Native，它允许你从用React编写的单个代码基构建原生iOS和Android应用程序。因此，React也是使用web技术构建移动应用程序的一个很好的选择。

• 测试
  单元测试： Jest，React Testing Library
  组件测试：Cypress, Jest
  E2E测试: Cypress, Nightwatch.js, Puppeteer, TestCafe

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。

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