Angular vs React vs Vue 2022

每个前端开发人员都听说过三个用于构建 Web 应用程序的框架：React、Vue.js 和 Angular。

React 是一个 UI 库，Angular 是一个成熟的前端框架，而 Vue.js 是一个渐进式框架。

它们几乎可以互换使用来构建前端应用程序，但它们并不是 100% 相同，因此比较它们并了解它们的差异是有意义的。

每个框架都是基于组件的，并允许快速创建 UI 功能。

然而，它们都有不同的结构和架构——所以首先，我们将研究它们的架构差异以了解它们背​​后的理念。

建筑学

反应

React 不强制执行特定的项目结构，正如您从下面的官方“Hello World”示例中看到的那样，您只需几行代码即可开始使用 React。

 ReactDOM.render(
  <h1>你好，世界！</h1>,
  document.getElementById('root')
);

React 可以用作 UI 库来呈现元素，而无需强制执行特定的项目结构，这就是为什么它不是严格意义上的框架。

React Elements 是 React 应用程序的最小构建块。 它们比 DOM 元素更强大，因为 React DOM 确保在发生变化时有效地更新它们。

组件是更大的构建块，它定义了要在整个应用程序中使用的独立且可重用的部分。 它们接受称为 props 的输入并生成元素，然后显示给用户。

React 基于 JavaScript，但它主要与 JSX (JavaScript XML) 结合使用，这是一种语法扩展，允许您创建同时包含 HTML 和 JavaScript 的元素。

您使用 JSX 创建的任何内容也可以使用 React JavaScript API 创建，但大多数开发人员更喜欢 JSX，因为它更直观。

Vue

Vue.js 核心库只关注 View 层。 它之所以称为渐进式框架，是因为您可以使用官方和第三方包（例如 Vue Router 或 Vuex）扩展其功能，将其转变为实际框架。

尽管 Vue 与 MVVM（Model-View-ViewModel）模式没有严格关联，但它的设计部分受到了它的启发。 使用 Vue，您将主要在 ViewModel 层上工作，以确保以允许框架呈现最新视图的方式处理应用程序数据。

Vue 的模板语法让你可以创建 View 组件，它结合了熟悉的 HTML 和特殊的指令和特性。 尽管也支持原始 JavaScript 和 JSX，但这种模板语法是首选。

Vue 中的组件很小，自包含，可以在整个应用程序中重用。 具有.vue扩展名的单个文件组件 (SFC) 包含 HTML、CSS 和 JavaScript，因此所有相关代码都驻留在一个文件中。

SFC 是在 Vue.js 项目中组织代码的推荐方式，尤其是大型项目。 需要 Webpack 或 Browserify 等工具将 SFC 转换为工作 JavaScript 代码。

角

在本文中，我讨论的是 Angular 2，而不是现在称为 AngularJS 的框架的第一个版本。

AngularJS，最初的框架，是一个 MVC (Model-View-Controller)) 框架。 但在 Angular 2 中，与 MV* 模式没有严格的关联，因为它也是基于组件的。

Angular 中的项目被结构化为模块、组件和服务。 每个 Angular 应用程序至少有一个根组件和一个根模块。

Angular 中的每个组件都包含一个模板、一个定义应用程序逻辑的类和元数据（装饰器）。 组件的元数据告诉 Angular 在哪里可以找到它需要创建和呈现其视图的构建块。

Angular 模板是用 HTML 编写的，但也可以包含带有特殊指令的 Angular 模板语法，以输出反应数据和渲染多个元素等。

组件使用 Angular 中的服务来委派业务逻辑任务，例如获取数据或验证输入。 它们是 Angular 应用程序的一个独特部分。 虽然 Angular 不强制使用它们，但强烈建议将应用程序构建为一组可以重用的不同服务。

Angular 是在 TypeScript 中构建的，因此建议使用它以获得最无缝的体验，但也支持纯 JavaScript。

人气

反应

React 是最受欢迎的 JavaScript 项目之一，在 GitHub 上拥有 160k 星。 它由 Facebook 开发和维护，并在他们的许多项目内部使用。 此外，根据 BuiltWith 的使用统计数据，它为超过 200 万个网站提供支持。

Vue

在这三个框架中，Vue 在 GitHub 上的星星最多，有 17.6 万颗星星。 该项目由前 Google 员工 Evan You 开发和领导。 根据 BuiltWith 的说法，它是开源社区中一个非常强大的独立项目，被超过 100 万个网站使用。

角

Angular 是由 Google 开发的，但令人惊讶的是，它并没有用于他们的一些旗舰产品，例如 Search 或 Youtube。 它经常用于企业项目，并根据 BuiltWith 的数据为超过 97,000 个网站提供支持。

它是三个框架中星数最少的，在 GitHub 上有 68k 星。 然而，当从 Angular 1 切换到 Angular 2 时，他们创建了一个全新的存储库，而不是继续 AngularJS 项目，该项目也有 59k 星。

生态系统

开源软件包可以为您节省开发应用程序的宝贵时间。 不仅如此，它们通常比定制的组件和包更好，因为它们经过了实战测试。

了解可帮助您更轻松地创建新功能的现成组件、主题和其他工具的可用性非常重要。

反应

许多前端应用程序依赖全局状态管理来存储信息，例如谁登录和其他用户设置。

最受欢迎的 JavaScript 状态管理项目是 Redux。 大多数开发人员使用 Redux 的官方 React 绑定，由 Redux 团队维护。

由于 React 的流行，查找输入组件和即用型元素非常容易。 它们都只是谷歌或 GitHub 搜索。

React 生态系统还包括 React Native，它允许您从用 React 编写的单个代码库构建原生 iOS 和 Android 应用程序。 因此，React 也可以成为使用 Web 技术构建移动应用程序的绝佳选择。

React 是 MERN 堆栈的一部分，其中包含 MongoDB、ExpressJS、React 和 NodeJS。 这种组合的好处在于单一语言——JavaScript——为整个应用程序提供动力。

Vue

尽管 Redux 可以在 Vue 中使用，但没有官方绑定。 但这不应该让您担心，因为 Vuex 是专门为 Vue 应用程序制作的官方状态管理库。 除了与 Vue 很好地集成之外，使用 Vue 的开发人员工具也很容易调试。

在 Vue 的早期，很难找到现成的组件。 随着社区的发展，您可以使用各种输入组件和高级元素来加快开发速度。

对于移动应用程序开发，有一个名为 Weex 的新兴项目。 Weex 是阿里巴巴开发和使用的，但没有 React Native 成熟和强大。 更重要的是，由于该项目在中国的开发和使用较多，因此很难找到英文文档和问题解决方案。

Vue 与 Laravel 集成得很好，这就是为什么它们经常一起使用。 Laravel 提供了完整的 JavaScript 和 CSS 脚手架，以支持在新项目中使用 Vue。

角

对于 Angular 中的状态管理，您可以使用 NgRx 项目。 它受到 Redux 的启发，但它是专门为 Angular 创建的。

与 Vue 和 React 一样，您可以将许多现成的组件导入到您的项目中。 与 Angular 稍有不同的是，Angular Material 项目中有很多官方组件。 这是 Google 的一个官方项目，为 Angular 应用程序提供 Material Design 组件。

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

Angular 是著名的 MEAN 堆栈的一部分，它将 Angular 与 MongoDB、ExpressJS 和 NodeJS 结合在一起。 与 MERN 堆栈类似，它的前端和后端都完全依赖于 JavaScript。

通用技术

Angular、React 和 Vue 都可以用于开发渐进式 Web 应用程序，也称为 PWA。

PWA 不是移动应用程序，而是智能手机用户可以将其作为快捷方式添加到其主屏幕的 Web 应用程序，并提供类似于原生移动应用程序的外观和感觉。

您还可以为每个框架找到高级模板和预制应用程序，但 Angular 和 React 比 Vue 有更多可用的高级选项。

表现

在选择框架或库时，您还需要考虑性能。

在许多情况下，您不必担心性能问题，尤其是在构建小型项目时。 然而，项目的范围和复杂性越大，性能就会（并且将会）成为一个问题。

重要的是要注意，在 Web 性能方面，开发质量和遵循最佳实践比框架的选择更重要。

但由于存在一些性能指标和差异，我将对其进行研究并解释每个指标如何影响您的开发工作。

JS 框架基准测试：Angular vs React vs Vue

JS 框架基准测试的结果表明，它们在大多数基准测试中都表现良好，例如在表中创建或追加行。

正如您在上面看到的，Vue 在选择行时比 Angular 和 React 慢得多。 另一方面，Angular 和 React 在交换行方面效率不高。

这些是渲染基准中唯一的实质性差异——在大多数情况下，不会产生明显的结果。 由于选择行是一种比交换行更常见的功能，我想说这个基准将 Vue 置于第三位，仅次于共享最高位置的 Angular 和 React。

在内存和启动时间方面，React 和 Vue 得分很高，但 Angular 稍慢一些。 Angular 启动一个基本脚本可能需要 150 毫秒，并且需要更多内存才能运行。

Perf Track：Angular vs React vs Vue

Google Chrome Labs 的 Perf Track 显示了来自数千个网站的生产数据。 这些统计数据受到许多其他因素的影响，不仅是选择的框架，让我们看看数字。

第一次内容丰富​​的油漆

与 Angular 相比，Vue 和 React 网站在此指标上的排名更高，后者可能需要更多时间来启动并向用户呈现内容。

最大的内容涂料

在渲染完整页面的三个框架中，Angular 也是最慢的，只有 27% 的 Angular 网站得分在可接受的范围内。

首次输入延迟

对于所有三个框架，超过 80% 的网站都在第一次输入延迟的可接受范围内，这表明用户可以与页面交互需要多少时间。

JavaScript 字节

迄今为止，最轻量级的应用程序是使用 Vue 开发的应用程序，68% 的 Vue 应用程序加载的 JavaScript 不到 1MB。 另一方面，Angular 和 React 应用程序往往具有更大的代码量。

如何使用这些指标

你可以从这些数字中看到一个趋势，但你不应该太快下结论。 例如，对于最后一个图，一个解释可能是 Vue 用于开发更轻量级的应用程序，而 Angular 用于更大的项目。

统计数据可以帮助指导您做出正确的决定，但您不能使用它们来证明一个框架比另一个框架更快或更好。

高级功能

对于更高级的应用程序，使用中的前端框架应该能够执行一些提高性能并且可以更好地扩展的任务。

两项关键技术是服务器端渲染 (SSR) 和虚拟化。

反应

React 通过官方的 ReactDOMServer 包支持服务器端渲染。 对于虚拟化，您可以使用一个流行的第三方工具，称为 React Virtualized。

Vue

Vue 以及官方 SSR 包也支持服务器端渲染。 此外，您还可以使用构建在 Vue 之上并支持 SSR 的 Nuxt.js 框架。

不幸的是，Vue 中的虚拟化选项并不那么强大。 在我看来，Vue Virtual Scroll List 是虚拟滚动的最佳解决方案，但它有点 bug 并且不如 React 和 Angular 的选项稳定。

角

Angular 有官方的 SSR Angular Universal 包，以及用于虚拟滚动和高效渲染大型列表的官方组件。

学习曲线

学习这些框架有多容易？

要回答这个问题，我们需要查看每个框架的复杂性以及它们引入的概念。

反应

在其最基本的用例中，React 是三个框架中最简单的。 那是因为你只需要导入库，然后你就可以开始用几行代码编写你的 React 应用程序。

但除了 Hello World 示例之外，大多数 React 应用程序都是基于组件的，并且不只是在页面上呈现一些元素。

一些开发人员对 React 感到奇怪或困难的一件事是，学习 JSX 是一条单行道。 您也可以使用原始 JavaScript，但由于大多数 React 开发人员使用 JSX，因此学习它几乎是不可避免的。

这是使 React 的学习曲线更陡峭的主要因素，但除此之外，对于了解 JavaScript 和了解 Web 开发概念的开发人员来说，它是一个易于学习的库。

Vue

Vue 的设置比 React 复杂一些。 您可以将它用作库来定义可以在整个 HTML 中使用的组件——但与 React 类似，这不是大多数项目的构建方式。

大多数 Vue 项目都会有一个名为App.vue的根组件和许多用于显示各种内容的子组件。

说到语法，唯一要学的新东西就是 Vue 的模板语法，如果你懂 HTML，就很容易掌握。 用于条件渲染和列表渲染的v-if和v-for等基本指令即使对于初学者来说也很容易理解。

此外，Vue 的单文件组件将所有前端代码保存在一个地方，便于组织新项目。

在我看来，Vue 是最容易学习的，因为它的简单性和直观的语法。

角

Angular 是三者中最复杂的项目结构，而且由于它是一个成熟的前端框架，它依赖于更多的概念。

除了组件，Angular 还支持模块和服务。 它希望您以特定方式编写和设计代码库，使您的项目在扩展时更易于维护。

至于语法，由于 Angular 最适合使用 TypeScript，因此在构建 Angular 项目时了解 TypeScript 很重要。

与 Vue 一样，您还必须熟悉类似 HTML 的语法，以便您可以开始使用 Angular 编写新的 UI 功能。

在我看来，对于普通开发人员来说，Angular 是最难学习的，因为它更复杂并且依赖于 TypeScript。

未来预测

许多开源项目和框架逐渐被遗忘，变得无人维护。 您是否应该担心我们在这里讨论的任何框架？

尽管我们无法完全预测会发生什么，但正在进行的开发工作是这些项目健康状况的良好指标。 人气和增长也是预测项目寿命的重要指标，所以让我们来看看每个框架。

反应

React v17.0 已经发布，但令人惊讶的是，它没有为开发人员提供任何新功能。

主要的变化是这个新版本更容易升级 React 本身。 您可以将 React 的某些部分从旧版本升级到新版本，而无需升级整个项目。

如果您的应用程序依赖于新版本更改或弃用的功能，您可以保留旧版本以保持此功能有效。 此更新使 React 成为一个不错的长期选择，因为它可以更轻松地与新版本保持同步。

自去年以来，React 的每周 npm 下载量增长了 44%。 从绝对数字来看，它仍然是三个项目中下载次数最多的。

Vue

Vue 3 已于 2020 年 9 月发布，它解决了 Vue 2 在大型项目中存在的许多严重问题。 它引入了受 React Hooks 启发的 Composition API，使跨组件重用逻辑变得更加容易。

整个项目用 TypeScript 重写，在新的 Vue 项目中改进了对 TypeScript 的支持，同时也使项目更易于维护。

Vue 3 是一个急需的升级，使 Vue 更适合大型项目。

自去年以来，Vue 的每周下载量增长了 87%，使 Vue 成为相对而言增长最快的框架。 如果 Vue 能够保持这样的增长速度，那么它肯定会很快超越 Angular。

角

Angular 最近推出了 Ivy 编译器。 它减少了构建时间，优化了资产，允许更快的测试，并总体上改善了开发人员的体验。

Angular 团队每年两次发布重大更新，其中可能包含新功能或只是使框架与新的浏览器版本同步。

自去年以来，Angular 的每周下载量增长了约 50%，因此它仍然是一个受欢迎的项目。

结论

Angular、React 和 Vue 都在非常活跃的开发中。 他们定期发布新版本并维护现有版本。 由于每种情况下当前的支持级别都很高，因此您可以安全地使用这些框架中的任何一个。

值得注意的是，Angular 的增长速度没有以前那么快，而 Vue——​​即使它最近才开始——似乎增长了很多。

如前所述，我们无法预测哪些框架会长期保持相关性，但每个项目背后都有一个很棒的社区，并且在不断发展。

我写这篇文章的目的是解释架构差异，分解每个框架的优势和劣势，并在适用的地方进行比较。

在进入一个新框架之前，有几件事情需要考虑。

首先，您团队的经验可能是选择新技术时的决定性因素。

同样，您必须考虑您所在地区可用的人才，以便您可以为您的项目聘请开发人员。

最后，当涉及到项目本身时，复杂性和范围也会影响您对框架的选择。

通过考虑所有关键差异，我希望您可以决定哪个是最适合您的目标和需求的前端框架。