Angular、React 和 Vue：全面对比

框架是所有技术的核心。

无论您是初学者、资深开发者、自由职业者还是项目负责人，详细了解每个框架的优缺点都是明智之举。本文将帮助您更好地理解每个框架及其发展趋势和相关见解。

让我们开始吧

1. Angular、React 和 Vue 的概述和历史

Angular是一个基于 TypeScript 的开源 Web 应用框架，由 Google 的 Angular 团队以及众多个人和企业组成的社区共同维护和开发。Angular 是由 AngularJS 的同一团队完全重写的。

开发商：谷歌

当前版本： Angular 10/ 2020年6月24日

初始版本： 2.0/ 2016年9月14日

官方文档： Angular

React是一个开源的 JavaScript 库，用于构建用户界面或 UI 组件。它由 Facebook 以及众多开发者和公司组成的社区共同维护。React 可以作为开发单页应用程序或移动应用程序的基础框架。

开发商： Facebook 

当前版本： 16.13.1/2020年3月19日

首次发布日期： 2013年5月29日

官方文档： React

Vue.js是一个开源的 Model-View-ViewModel (MVVM) JavaScript 框架，用于构建用户界面和单页应用程序。它由 Evan You 创建，并由他和来自 Netlify 和 Netguru 等公司的其他活跃核心团队成员共同维护。

开发人员： Evan You 及其团队

当前版本： 2.6.11/2019年12月13日

首次发布： 2014年2月

官方文档： VueJS

2. 2020年谁最受欢迎？

NPM趋势调查： NPM趋势调查显示，下载量最高的软件包是React，而Angular和Vue则遥遥领先。

NPM趋势调查：它与你过去使用的技术、你愿意使用的技术以及你愿意学习的技术有关。

谷歌趋势调查
显示了开发者对从事技术工作的兴趣水平。

NPM趋势调查：不同经验水平的开发人员使用的技术。

3. 性能：Angular vs React vs Vue

概述：
性能是前端应用程序最重要的考量因素之一。在评估 Angular、React 和 Vue 的性能时，请记住DOM 被视为任何应用程序的用户界面。React 和 Angular 更新 HTML 文件的方式各不相同，而 Vue 则融合了 React 和 Angular 框架的优点。接下来，我们将深入比较 Angular、React 和 Vue：

角

优点：

• MVC 架构允许 Angular 将任务拆分成逻辑块，从而减少网页的 初始加载时间。

• MVC 还允许关注点分离，视图部分位于客户端，从而大大减少了后台查询。

缺点：

• 由于该框架具有许多特性，有时它们会给你的项目带来负担，所有这些都会导致应用程序更笨重，性能比 React 或 Vue 更慢。 

• 新的、重大的变更经常出现。这可能会给开发人员在适应这些变更时带来问题。

React

优点：

• React 是一个前端库，它使用虚拟 DOM，可以提升任何规模的、需要定期更新内容的应用程序的性能。例如，Instagram。

• React 基于单向数据流。这将使对整个项目的控制更加精准。

• 该库已更新至最新版本。Facebook 团队为其提供支持。Facebook 社区可提供建议或代码示例。使用 React + ES6/7，应用程序将拥有高科技特性，并适用于高负载系统。

缺点：

• 学习曲线：由于该框架功能并不齐全，因此需要深入了解才能将用户界面免费库集成到 MVC 框架中。

• 面向视图是 ReactJS 的缺点之一。应该找到“模型”和“控制器”来解决“视图”问题。不使用同构方法来开发应用程序会导致搜索引擎索引问题。

• 很多开发者不喜欢 JSX React 的文档，手册对新手来说难以理解。React 的库规模庞大。

VueJS

优点：
 

• Vue 让开发变得无比轻松，因为经过 min 和 gzip 压缩后，生产环境可用的项目大小仅为 20KB。这不仅带来了更快的运行速度，也促进了开发，并允许开发者将模板到虚拟 DOM 的转换与编译器分离。更重要的是，当项目体积最小化时，您无需在过度优化上投入额外的精力。

• 使用 Vue.js 最重要的优势之一是其体积小巧，经过 min 和 gzip 压缩后，即可获得仅 20KB 的生产就绪版本项目。与其他框架（例如 Angular、ReactJS 和 jQuery）相比，Vue.js 的体积优势无可匹敌。

缺点：

• 常用插件非常有用，因为它们可以与其他各种工具协同工作，简化开发流程。Vue.js 缺少大多数常用插件，这是 Vue.js 的缺点。

• 作为新一代技术，Vue 与 React 和 Angular 相比，社区支持最少。

4. 升级：Angular vs React vs Vue

有时，从一个版本升级到另一个版本可能会给开发者带来麻烦。如果比较 2020 年 Angular、React 和 Vue 的升级过程，你会惊讶地发现 Vue 的升级过程最直接、最快捷。让我们深入探讨一下。

角

Angular 通常每六个月发布一次重大更新。此外，任何主要 API 在弃用前还有六个月的过渡期。这意味着，开发者有两个六个月的发布周期来进行必要的更改。

React

React 被一些大型公司（例如 Twitter）所采用。Facebook 也认为其稳定性是其最大的优势。在 2020 年，Vue、Angular 和 React 之间的版本升级通常比 Angular 和 Vue 更容易。像 React CodeMod 这样的脚本可以确保从一个版本无缝迁移到另一个版本，并提供稳定性。

VueJS

VueJS 为开发者提供了最智能的迁移选项。如果您聘请了 Web 开发人员，他们只需使用迁移辅助工具即可对网站进行更改，因为如果您选择从版本 1 迁移到版本 2，90% 的 API 都将保持不变。

5. 框架规模：Angular vs React vs Vue

考虑到下面提到的各个框架和库的大小，Vue 和 React 适合轻量级应用程序，而 Angular 则非常适合复杂和重量级应用程序。

角

Angular 拥有丰富的功能，从模板到测试工具，为开发者提供了强大的支持。如果您正在考虑开发一款功能强大的大型应用程序，那么 Angular 将是您下一个项目的理想之选。

React

React 并非像 Angular 那样的框架，它提供的库也不像 Angular 那样丰富。因此，React 是一个适合现代 Web 开发的框架。

VueJS

如上所述，Vue 是众多框架和库中体积最小的，是轻量级 Web 开发和单页应用程序的理想选择。如果您想要选择一个易于访问且体积小巧的库，那么 Vue 是最佳选择。

6. 部署：Angular、React 和 Vue 的比较

配置速度完全取决于开发者可访问的库的数量。因此，可以得出结论：使用 Angular 开发 Web 应用比使用 React 更快更容易，而 React 的架构比 Angular 更易于扩展。

角

由于 Angular 是一个涵盖从项目创建到代码优化所有环节的通用框架，因此它在整体部署方面最具挑战性。然而，Angular 提供了丰富的功能选择，开发者只需一条命令即可获得一个完全优化的打包应用，并将其部署到任何静态主机。

React

虽然 React 没有像 Angular 或 Vue 那样完善的工具链，但它以灵活性取胜。你可以将任何你想要的库与 React 结合使用。随着生态系统的发展，我们现在有了 Create React App 和 Next.js 等 CLI 工具。

VueJS

与 Angular 和 React 相比，Vue 的预编码结构使您能够快速部署应用程序，而不会影响其性能。只需一个简单的命令，您就可以在开发过程中使用所需的一切。使用 Vue 开发应用程序既快捷又方便，因此它是初创公司的理想选择。

7. 社区支持：Angular、React 和 Vue 的比较

Angular 和 React 分别由 Google 和 Facebook 支持，因此它们当然拥有强大的社区支持，而 Vue 仍然是一个开源社区。

角

Angular 于 2010 年发布，一直由 Google 持续维护和支持，并且每六个月都会进行频繁更新。

React

React 是Facebook于 2013 年推出并维护的 Javascript 库，它提供了丰富的框架功能。

VueJS

作为一个新成员，它不像 Angular 和 React 那样拥有活跃的社区，但它仍然被包括 EuroNews、阿里巴巴等在内的领先公司所使用。

8. 如何选择？：Angular、React 还是 Vue？

为什么选择 Angular？

• 当您需要开发大型应用程序时。

• 以更具可扩展性的方式构建框架，从而组织您的结构。

• 开发实时应用程序，例如即时通讯应用。

• 开发原生应用、混合应用，以适应长期项目。

• TypeScript采用面向对象的方法。

为什么选择 React？

• 当你需要开发跨平台应用程序时……

• 在短时间内开发轻量级企业应用。

• 强大的社区支持和解决方案。

• 升级现有应用程序的功能和特性。

为什么选择 VueJS？

• 当你开发出大量智能、快速、高性能的应用程序时。

• 在资源有限的情况下，如何将现有项目升级到现代框架

• 当你的支持来自社区而不是公司时。

9. 使用的公司：Angular、React 和 Vue

10. 快速回顾

结论

JavaScript 框架市场中有很多选择，例如 Node、Ember、Meteor 等。但 Angular、React 和 Vue 才是真正的王者。我们将对每个框架的各个方面和参数进行比较。目的是帮助您了解这些框架的核心特性和功能，以便您为下一个项目选择合适的框架。

参考资料 ：webdev zone、levelup coding、npm trends、GitHub

不要被比较所迷惑，要明智选择！

在Twitter和LinkedIn上关注我

如果你想让我写一篇关于任何Web开发概念的文章，请在评论区留言。

欢迎提出宝贵意见