前端框架比较：Angular - React - Vue
前端框架比较：Angular - React - Vue
前端 JavaScript 框架近年来的发展速度非常快，这让许多初学者在选择适合自己的框架时迷失了方向，不仅是程序员，一些创业者也在为自己的项目选择合适的框架而苦苦挣扎。无法决定将哪个 JavaScript 框架用于前端，本文将帮助您做出正确的决定。
在本文中，我们将介绍 Angular、Vue 和 React 框架的不同方面，以了解它们如何满足您的需求。本文不仅仅是这些框架的比较，而是我们将尝试将其作为标准框架来帮助判断前端 JavaScript 框架。如果明年发布新框架，您将确切地知道在新框架中要看什么！
笔记：
我们努力避免框架之间的偏见，但肯定有一些框架比其他框架解决的问题更好，这是正常的。
在本文中，我们假设您具有 JavaScript 的基本知识。
Angular 框架简史
Angular 框架（以前称为 AngularJS）于 2010 年首次发布，由 Google 开发，是所有框架中最古老的，它是一个基于 TypeScript 的开源 JavaScript 框架。
该框架旨在帮助开发人员在使用简单的声明性脚本创建 SPA 和构建动态网页时解决问题。该框架遵循 MVC（模型-视图-控制器）层次结构、MVVM（模型-视图-视图-模型）和各种其他层次结构。 ，这使得它能够提高网页的安全性、灵活性和易于扩展性，以及安排信息交换。 2016 年发生了一个重大转变，当时谷歌发布了 Angular 2，因为它从原来的名称 AngularJS 中删除了“JS”，成为唯一的 Angular，尽管 AngularJS（版本 1）仍在接收更新，我们将重点讨论最新的稳定版本，即Angular 13，于 2021 年 11 月发布。
说明：SPA（单页应用程序）是使用时不需要重新加载页面的 Web 应用程序。这些应用程序的示例包括 Google 地图、Facebook 应用程序和 Gmail 电子邮件应用程序。此外，单页应用程序具有独特的用户体验，因为环境模仿自然应用程序。换句话说，顾名思义，就是一个单一的网页，通过 JavaScript 控制应用程序内容的显示、下载和排列。
Model-View-Controller架构是使用master或controller将展示信息View的web页面和信息存储Model分开的结构，便于代码的编写、维护和修改，增加了安全性。
React 框架的简史
React 框架（也称为 ReactJS）是一个用于构建用户界面的开源 JavaScript 库，由 Facebook 开发（目前已死）并于 2013 年发布。该公司在其许多产品（如 Facebook、Instagram 和WhatsApp）。
React 框架主要旨在帮助开发人员解决与为大型数据库高效供应大数据相关的问题。 React 框架基于组件的概念，您必须首先构建管理自己状态的包装组件，然后将这些组件组合在一起以创建用户界面。
Vue.js 框架的简史
Vue.js 框架（也称为 Vue 或 VueJS），这个框架是比较组成员中最年轻的。这个框架是由 Evan You（前 Google 员工）在 2014 年开发的。在与 Angular 框架合作后，Evan 决定使用 Angular 的特性创建一个类似的 JavaScript 库，并使新框架更加轻量和容易，这就是为什么这两个框架有很多相同之处。 .
在过去的几年里，Vue 的受欢迎程度发生了巨大的变化，虽然它没有像它的前辈那样得到大公司的支持，但它已经成功地在 JavaScript 框架市场上获得了不错的份额。该框架的开发完全基于开发人员受众的输入。
注意：在使用开源项目或框架之前，请务必检查其许可证的质量。所有以前的框架都使用 MIT 许可证，该许可证对专有软件的重用提供了有限的限制。但一般你应该注意这一点，以避免滥用任何框架或项目的后果。
深入了解每一帧的优缺点
我们现在将进一步深入了解这些框架的主要优缺点以及它们之间的区别，以帮助技术专业人员或工程师选择最适合他们的开发需求的框架。
劳动力市场
作为新手程序员，我们首先应该关注市场趋势和需求，正如 2018 年末的趋势所证明的那样，需要使用 Angular 或 React 框架技能的工作数量大致相同，而 Vue 仍然是其中的一小部分份额（大约占其余框架中职位空缺百分比的 20%），通常此统计数据已过时且通用，如果您想要更新的统计数据，您可以尝试使用 Google 趋势搜索，它会查看特定时期内的搜索趋势React、Angular 和 Vue 函数的时间。如果您想研究您所在国家/地区的就业市场，Google 趋势还会按地理位置对其进行细分。
通常，从当前市场的角度来看，对于新手来说最好的选择是学习 Angular 或 React，因为 Vue.js 框架的普及仍然有限，它在大公司中的使用有限，并且可能需要一些时间这些公司在他们的项目中采用 Vue 框架 .js，这将需要框架达到更高的成熟度，这反过来将需要更多的开发人员致力于改进 Vue.js 框架。
社区与发展
让我们看看社区来评估这些框架的开发，我们已经在所有框架中看到了过去几年额外版本的发布频率，这表明这些框架的开发仍在继续快速发展。
另一个要查看的指标是该框架在 GitHub 上的使用次数，必须由存储库作者启用。这显示了 GitHub 上有多少其他存储库依赖于此存储库。 Angular 显示有 210 万用户，React 目前有 870 万用户，而 Vue 没有。
更新代码
由于有些项目很大，需要研究如何更新代码并使其与框架及其最佳实践保持一致，我们应该看看如何更新每个框架的代码。实际上，在将代码从一个版本更新到另一个版本时，您经常会遇到很多问题，因此及时了解框架的更新很重要，因为有些更新很重要，需要进行从小到大的修改，这会极大地影响工作流程，想象一下，每次更新都必须修改您编写的代码的时期是繁琐且耗时的，只是为了保持框架的组件兼容。
在 Angular 下，每六个月安排一次重大更新。在弃用任何主要 API 之前还有六个月的时间，这给了您相对大量的时间（一整年）来进行必要的更改（如果有的话），并调整代码以适应更新。
事实上，在稳定性方面，React 是可控的。 Facebook 曾表示稳定性对他们来说是最重要的，因为很多大公司都使用这个框架，而通过发布升级通常是 React 框架中最容易的，因为诸如 react-codemod 脚本之类的脚本可以很容易地更新代码。
至于 Vue.js 框架，它可以被认为是最简单的，这是我们在 Vue 3 文档的代码更新部分注意到的，他指出 Vue 2 和 Vue 3 之间有很多相似之处，而90% 的 API 是相同的，如果您想将代码从 1.x 版更新到 2.x 版，可以在控制台上运行一个代码更新实用程序来评估您的应用程序的状态。
框架有效性
我们将通过每个项目中我们需要的最重要特征来审查框架的有效性，包括总代码大小和加载时间、可用组件和学习难度曲线。
大小和加载时间
框架大小相对较小，不会产生太大影响，因为缓存和缩小在当今的开发和编程中非常普遍。尽管帧大小之间存在很大差异（例如 Angular 是最大的），但与平均网页大小（根据 httparchive 数据约为 2MB）相比，它们仍然很小。此外，如果您为这些库使用 CDN，则用户很可能在网站加载时已经在其本地系统中下载了该库。事实上，随着第四代和第五代通信和光纤连接的出现，这一点将不再重要，因此我们不会对其进行扩展。
这些成分
无论我们谈论的是 Vue、React 还是 Angular，组件都是这三个框架中最重要的部分。组件通常会获得输入，并相应地改变行为。这种行为变化通常表现为页面一部分的用户界面的变化。使用组件可以更轻松地重用代码。该组件可以是电子商务网站上的购物车或社交网络上的登录框。
Angular 框架中的组件
Angular 框架处理模块，而模块又包含组件。组件是 Angular 应用程序的构建块。该组件包含一个 TypeScript 类，其 @零件 () 模拟器、HTML 模板和格式文件，其中 @零件 () 模拟器在 Angular 中定义了以下信息：
一个 CSS 选择器，用于定义如何使用模板中的组件。您在模板中使用的与此选择器匹配的 HTML 元素将成为该组件的副本。
一个告诉 Angular 如何输出这个组件的 HTML 模板。
一组可选的 CSS 格式，用于定义 HTML 模板元素的外观。
React 框架中的组件
React 框架以一种有趣的方式组合组件，将用户界面和组件的行为组合在同一代码中，以负责创建 UI 元素并指示其行为（有关 React 框架中组件的更多信息，请参阅 React 组件文章）。
插件框架Vue
看看 Vue，用户界面和行为也是组件的一部分，类似于 React 组件，这使得组件更容易使用。它还将使事情高度可定制，允许程序员从代码中集成用户界面和组件的行为。此外，您还可以使用 Vue 的预处理器来代替 CSS，这很棒。 Vue 在与其他库（例如 Bootstrap）集成时也很棒。
学习困难
学习者心中最重要的问题之一是学习这些框架中的每一个有多难？我们将尝试回答这个问题。
Angular 框架的学习曲线比较陡峭，学习起来相对困难，因为它是一个完整的集成解决方案，要掌握 Angular 需要你学习 TypeScript 和 MVC 等相关概念。事实上，虽然学习 Angular 需要时间，但对它的投资是有回报的，学习者将完全了解 Web 应用程序前端的工作原理。
React 框架相对更容易，并且有自己的官方参考，它应该可以帮助人们在大约一个小时内设置 React。文档全面而完整，Stack Overflow 上已有常见问题的解决方案。 React 不像 Angular 那样是一个完整的框架，高级功能需要使用外部库。这使得核心框架的学习曲线不是很陡峭，但这取决于您所采用的路径和您要构建的 Web 应用程序。但是，快速学习使用 React 并不一定意味着您正在使用最佳实践（您可以在 Hasoub Encyclopedia 中查看阿拉伯语 React 框架的完整操作文档）。
Vue 框架比 Angular 或 React 框架更容易学习。此外，Vue 在功能（例如组件的使用）方面与 Angular 和 React 有重叠。因此，从其中任何一个切换到 Vue 都是一个简单的选择。然而，Vue 框架的简单性和灵活性是一把双刃剑——它允许为简单而编写易于构建的代码，但这可能导致开发人员忽略编译强大的代码结构，从而难以扩展代码或调试并稍后在扩展项目时进行测试。
总体而言，虽然 Angular 和 React 相对来说难度更大，但它们在掌握时的用途是无限的。例如，您可以将 Angular 或 React 与 WordPress 和 WooCommerce 集成以创建 PWA。
使用这些框架的最著名的公司
我们将回顾使用这些框架的最重要的公司，看看他们如何采用这项技术以及巨头如何看待这些更新。
最受欢迎的使用 Angular 框架的公司
Google 使用 Angular 框架是因为它为他们提供了高性能的功能和构建更大的应用程序。它也用于 Google Cloud Console 开发。 Microsoft Office 能够在 Angular 框架的帮助下启动两个独立的应用程序，在 Upwork 的情况下，它正在使用它为站点成员提供响应式体验。
使用 React 框架的最受欢迎公司
事实上，许多大公司都在使用 React，这有力地表明了这个框架有多好。这个框架也很常用，因为它提供了一种更快的方式来构建和维护移动应用程序，同时与原生应用程序编程方法相比使用更少的资源。
有些人认为它是当今市场上最好的前端应用程序库之一。使用该框架的公司包括 Twitter、Amazon Prime、Udemy、Expo、Uber、Pinterest、Netflix、纽约时报等等。
使用 Vue.js 框架的公司
Vue.js 框架相对较新，但有很多公司正在使用它。一些使用 Vue 的公司包括 Google、Apple、Trivago 和 Nintendo。
Google 能够将 Vue 用于他们的工作页面，Nintendo 在他们的网站上添加了该框架，世界上最受欢迎的酒店搜索网站之一 Trivago 将 Vue 添加到他们的杂志中。 Apple 使用 Vue 框架创建了自己的 SwiftUI 教程。尽管该框架具有现代性，但公司发现将其添加到他们的技术中很容易且有效。
值得注意的是，Vue.js 框架经常被阿里巴巴、百度、腾讯甚至小米等中国巨头使用，而不是 Facebook 和谷歌等西方公司创建的 React 或 Angular 框架。我们不知道这种趋势的确切原因，但预计中国市场将继续使用 Vue 框架快速增长，特别是因为它是一个独立的开源库，没有任何外部链接。
我们如何为我们的项目选择最合适的框架？
在这里，我们想到了最重要的问题，即我们如何知道哪些框架适合我们的项目？最大化每个框架的好处的最佳方法是什么？您如何根据各自的优缺点知道何时使用它们？这是帮助您做出此类决定的快速指南。
何时使用 Angular 框架
不管每个框架的流行度和普及度如何，Angular 都是框架中最成熟的，有很好的贡献者支持，是一个集成包。然而，Angular 框架中的框架和开发概念的学习难度通常会阻碍新开发人员，它通常用于以下项目：
大型和复杂的项目。
可扩展、可靠和稳定的项目。
开发人员事先了解或已经使用 TypeScript 的项目。
何时使用 React 框架
React 是市场上最流行和使用最广泛的框架，看起来它有着光明的未来。对于想要开始使用前端 JavaScript 框架、初创公司和喜欢灵活性的开发人员来说，这是一个不错的选择。该框架还具有与其他框架无缝集成的能力，这在希望代码具有一定灵活性的程序员眼中增加了巨大的优势。总的来说，React 框架是以下项目的合适解决方案：
可以包含可重用组件的项目
想快速腾飞的中小型项目
需要高度可扩展性的项目
交货时间短的项目
何时使用 Vue.js 框架
它是该领域的最新产品，没有大公司的任何支持，但是我们发现它在过去几年中表现良好，成为旧框架的强大竞争对手，特别是随着 Vue 3.0 的发布。可能是因为很多中国巨头都依赖这个框架，一般你可以在以下项目中使用 Vue.js 框架：
需要高性能的项目和应用程序
当您缺乏熟练的前端开发人员时
您的团队有足够的时间学习新技术
结论
在本文中，我们了解了 JavaScript 框架之间的差异，因此我们从每个框架的简要历史开始，从劳动力市场、开发者社区以及采用意愿等多个方面了解它们之间的差异每个框架。我们通过库的大小及其对页面加载时间和团队的影响加深了对每个框架有效性的理解。在这些组件中，让我们看看使用这些框架的最受欢迎的公司，以及根据我们正在从事的
对于一个真正的工程师来说，他选择的轮胎并没有根本的区别，因为适应新轮胎只需要一段时间。每个框架都有其优点和缺点，这意味着并不总是必须有一个正确的选择，而是针对每个文章的位置。
请记住，Hsoub 学院包含有关这些 JavaScript 框架的各种教育文章以及数百篇有关 JavaScript 语言本身的文章，我们建议您访问 JavaScript 语言部分进行探索。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
