前端开发者在开始一个新项目时首先要回答的问题是：我应该选择哪个框架？哪个框架更适合我的需求？
在本文中，我们将简要概述当前使用的最常见的前端框架，旨在帮助您选择最能满足您需求的框架。这些框架是 Angular、React 和 Vue.js。
快速概览
Angular 是一个包含大量组件、服务和工具的前端框架。在 Angular 的网站上，您可以看到他们将 Angular 定义为：
“现代网络开发者的平台”
它由 Google 开发人员开发和维护，但奇怪的是，它并未用于实现任何他们最常见的产品，例如搜索或 YouTube。
React 被认为是一个 UI 库。他们将自己定义为：
“用于构建用户界面的 JavaScript 库”
Facebook 开发人员支持这个库的开发和维护。而且，在这种情况下，Facebook 的大部分产品都是用 React 制作的。
最后但并非最不重要的一点是，根据其网站，Vue.js 是：
“一个进步的 JavaScript 框架”
Vue.js 由 Evan You 开发和领导，但它也依赖于一个庞大的开源社区。
这三个框架有几个共同点，例如每个都遵循基于组件的架构，并允许快速创建 UI 功能。 React 和 Vue.js 主要是声明性的，虽然 Angular 也可以是声明性的，但它确实更具必要性。尽管如此，根据它们的结构、架构和工作方式，它们呈现出更多的差异，所以让我们深入研究所有这些特征。
结构
Angular
Angular 完全使用 Typescript 构建，Angular 上的每个项目都由模块、组件和服务构成。至少，每个模块必须有一个根模块和一个根组件。
Angular模块
根据 Angular 的网站，Angular 应用程序是模块化的，并且有自己的模块化系统，称为 NgModules。
NgModules 是专用于应用程序域、工作流或一组密切相关的功能的内聚代码块的容器。
它们可以包含组件、服务和其他代码文件，其范围由包含的 NgModule 定义。 他们可以导入从其他 NgModule 导出的功能，反之亦然。
Angular 组件
在 Angular 中，组件是代码的基本 UI 构建块。它们都有这样的结构：
- 实现组件逻辑的 Typescript 类
- 用于呈现组件的 HTML 模板（包括 Angular 模板语法）
- CSS 或 SCSS 中的样式表
角服务
服务是实现业务逻辑的类。这些服务旨在提取组件之外的所有复杂且可重用的逻辑。例如，从服务器获取数据等操作必须在服务上完成。为了使这些服务可用于任何组件，Angular 使用依赖注入。
这是可以在 Angular 应用程序中识别的主要结构。但是，还涉及许多其他部分，例如指令、管道等。
React
React 没有提出要遵循的特定结构，只需几行代码，您就可以拥有一个简单的 React 应用程序。最小的 React 示例可能是这样的：
尽管如此，我们可以在 React 项目中识别出两种块：元素和组件。 它们是用 JSX 编写的，这是一种语法扩展，允许您创建同时包含 HTML 和 JavaScript 的元素。 JSX 的一个例子可能是这样的：
React 元素
元素是 React 应用程序的最小构建块。 一个元素的例子可能是这样的：
React 组件
组件是 React 应用程序的更大构建块。 它们使您可以将 UI 拆分为独立且可重用的部分。
从概念上讲，组件就像 JavaScript 函数。 它们接受任意输入，称为 props，并返回描述应该出现在屏幕上的内容的 React 元素。 为了能够处理这些函数中的状态和生命周期特性，它们包含了一堆称为钩子的函数。
定义组件的最简单方法的一个示例可能是这样的 JavaScript 函数：
React 将这些代码称为函数组件，因为它们实际上是 JavaScript 函数。
如您所见，使用 React 进行开发非常简单。 当然，还有更多的事情需要考虑，但我们可以总结为 React 应用程序是元素和组件的组合。
Vue.js
Vue.js 中的结构非常简单。 所有部件都是独立的、可重复使用的组件。
一个 Vue.js 应用程序的最小示例可能是这样的：
Vue.js 中的组件是用扩展名为 .vue 的单文件组件 (SFC) 编写的。 在这些文件中，有：
- JavaScript 逻辑
- HTML 模板（Vue.js 有自己的模板）
- CSS 或 SCSS 中的样式表
其他特征比较
除了结构之外，还可以突出其他特征。例如：应用程序的状态是如何管理的？
他们三个都受到 Redux 的启发，但每个都有不同的方法：
- Angular 有自己的库 NgRx，这是一个受 Redux 启发并使用 RxJS 实现的状态管理项目。
- React 使用由 Redux 团队维护的项目 React Redux。
- Vue.js 有自己的库，称为 Vuex。
另一个需要考虑的有趣问题是：该框架提供了多少现成的组件？
Angular 有很多官方的即用型组件。在 Angular Material 项目中，您可以找到大量可以在自己的项目中使用的组件。对于 React 和 Vue.js，你可以在 Github 或 Google 上找到很多。
关于移动应用的开发，可以开发跨平台的移动应用：NativeScript（Angular）、React Native（React）和Weex（Vue.js）。 NativeScript 和 React Native 都有大量的信息和支持，但对于主要在中国地区使用的 Weex 来说却不是很多。
学习曲线
在谈到这些框架的结构之后，您可能会想到每个框架的学习曲线如何，对吧？让我们深入探讨一下这个话题。
对于他们所有人，我们必须学习新的东西。例如，对于 Angular 和 Vue.js，我们必须熟悉类似 HTML 的语法，而在 React 中，您必须了解 JSX。
在 Vue.js 中，您必须使用 SFC，但除此之外，我没有想到任何困难。
对于 React，一旦你正确理解了 JSX 是如何工作的，剩下的就很简单了。没有您必须遵循的结构或您需要知道的特定模板。如果您熟悉开发概念和 JavaScript、HTML 和 CSS，那么您就拥有了一切！唯一可能有点挑战的是学习钩子是如何工作的。
最难学习的框架是 Angular。要使用这个框架进行适当的开发，除了对 TypeScript 有很好的理解之外，您还需要记住 Angular 项目具有强大的结构。这有助于您在项目扩展时保持项目的可维护性，但在开始时可能会有点困难。
综上所述，根据经验，Vue.js 的学习曲线较软，React 次之，Angular 最难。但是不用担心，最后，有了适当的文档和良好的概念基础，我们就可以处理所有事情！
人气
有几种方法可以检查技术或框架的流行程度。 在本文中，我们根据这些问题咨询了不同的来源，以了解每个来源的受欢迎程度：Google 搜索、npm 下载、Github 明星、每个框架实现的应用程序以及最需要的技术。
谷歌搜索：
如果我们去谷歌趋势检查搜索并比较三个框架，我们会得到这个图形：
我们可以看到 React 是搜索最多的，而 Vue.js 是最少搜索的。
如前所述，Vue.js 主要用于中国，如果我们按地区比较结果，可以检查这一点。 此外，我们可以看到，在西班牙、德国和意大利，搜索次数最多的是 Angular。
npm 下载：
如果我们检查 npm 趋势中每个框架在过去一年中的下载量，我们可以看到下载次数最多的一个是 React。
Github 星：
angular vs react vs vue github评分在下图中我们可以看到Github上star比较多的框架是Vue.js，其次是React，最后是Angular。 为了公平起见，我们在 Angular 的星星中添加了来自 Angular.js 的星星，因为当他们从 Angular.js 迁移到 Angular 时，他们启动了一个新的存储库，所以他们一开始拥有的所有星星都丢失了。
使用每个框架构建的应用程序：
使用 Angular 和 react 构建的应用程序数量衡量框架受欢迎程度的另一种方法是咨询每个框架构建了多少应用程序。 为此，我们检查了网站 builtWith，发现 React 是迄今为止使用最多的！
要求：
对 Angular 与 reactLast 的需求，但并非最不重要的是，让我们强调每个框架的需求。 为了获得这些信息，我们在 LinkedIn 上进行了一些搜索，同时考虑了在欧盟和美国搜索工作的结果。
正如我们在这张图中看到的，最需要的框架是 React，其次是 Angular，最后是 Vue.js。
表现
在为项目进行开发时，重要的是要考虑应用程序的性能。 因此，了解这三个框架的性能是有意义的。
我们想强调的是，检查哪个更快并不是我们性能问题的唯一解决方案。 事实上，更重要的是保持良好的发展质量并遵循良好的做法。
也就是说，让我们看看每个人的行为是什么。
JS 框架基准：
根据 JS Framework Benchmark 向我们展示的结果，我们可以看出，一般来说，Vue.js 是最快的框架。 尽管如此，差异并没有那么大。
最相关的是选择 React 比其他慢一点的行的动作； 交换 Angular 和 React 都比 Vue.js 慢得多的行，并清除 Angular 最慢的行。
性能轨道：
Perf Track 根据来自数千个网站的不同度量生成一堆图形，但这里让我们关注其中的几个（您可以在此处查阅整个结果：Angular、React 和 Vue.js）。
在上图中，我们可以看到 React 和 Vue.js 在加载和呈现给用户的第一个内容 (FCP) 和最大内容 (LCP) 方面明显快于 Angular。
谈到 Cumulative Layout Shift (CLS)，React 是拥有更多 CSL 低于 0.1 的站点的站点。尽管如此，Angular 和 Vue.js 的结果更糟，但还不错。
关于用户第一次与网站交互 (FID) 所花费的时间，所有框架都呈现出良好的结果。
最后但并非最不重要的一点是，在 Angular 中，浏览器请求页面和从服务器接收到第一个信息字节 (TTFB) 之间的时间比 React 和 Vue.js 短，其中 React 是最慢的框架。
结论
总之，所有这些框架都可以在前端应用程序中使用。诚然，对于大型项目，也许 Angular 是最好的选择，因为它为您提供了一个坚实的结构供您遵循，这可以帮助我们拥有一个有组织且可维护的基础代码。尽管如此，只要具备架构和 Web 开发概念的适当知识，我们就可以使用这些框架中的任何一个来编写有组织的代码。
此外，这三个框架都有一个活跃的社区，提供大量文档、支持和大量课程。关于性能，它们也都非常相似。
希望本文能帮助您选择最适合您需求的框架，或者最能引起您注意的框架。
最后，为了让您能够轻松地比较所有三个，这里有一个使用每个框架的小应用程序示例，一个简单的“搜索器”。它向用户显示一个搜索框，并通过调用 Google 自定义搜索 API 来获取与用户查询相关的结果。返回的结果以列表形式显示给用户。在这里你有链接：
- 登录 发表评论