Vue vs. React vs. Angular：谁才是2021年最优框架？

看到这个题目，也许你会说，我一个专用React、Vue或Angular的开发人员，为什么要知道哪个是最好的框架呢？我们之所以不能忽略对开发社区进行持续的比较，其中一个充分的理由就是：React是UI库，Angular是成熟的前端框架，而三者之间最年轻的Vue则被称为渐进式框架。这些框架每一个都具有其独特的优势和性能指标，迫使人们去研究分析。

这些框架中都是基于组件的，并且都有助于快速创建UI功能。甚至可以说，在构建前端应用程序时，它们几乎可以互换。但是，它们不是100％相同。

这就是为什么要写这篇文章的原因。当然最重要的是，为大家提供必要的知识结构，以便可以在将来需要时决定使用哪个技术。

一起来了解一下吧。

许可证

没错，请确保在使用开源框架或库之前彻底检查其许可证。幸运的是，React，Angular和Vue使用的都是MIT许可证。这是一件幸事，因为它对重用提出了有限的限制，即使是在专有软件中。但是，在使用任何框架或软件之前，请务必尽可能全面地了解许可证的含义。

架构

Angular

Angular框架属于MEAN堆栈，这也是当今初创企业最热门的技术堆栈。Angular是用于开发基于TypeScript的web应用程序的完整框架，主要用于构建单页web应用程序（SPA）。

与原始框架AngularJS不同，Angular 2与MVC模式并没有严格的联系，因为它是基于组件的。Angular的结构方式包括模块、组件和服务。

在Angular框架中，每个组件都有一个类或一个模板，用于定义应用程序逻辑和元数据（装饰器）。组件的元数据提供有关所需构建块位置的指导以便于创建和显示其视图。

Angular架构中的另一个重要因素是模板，这是用HTML编写的。模板也可以包含带有特殊指令的Angular模板语法，以便于输出交互性数据并可以呈现多个元素。

组件使用服务——Angular应用程序的独特元素——来授权业务逻辑任务，例如获取数据或验证输入。虽然未严格要求使用服务，但将应用程序构造为一组可重复使用的不同服务总是明智的。

React

React是一个开源的前端库，主要用于开发用户界面。这种灵活的前端解决方案不会强制执行特定的项目结构。精于React的开发人员只需要几行代码就能启动使用它。

React是基于JavaScript的，但在大多数情况下，我们会结合SX（JavaScript XML）一起使用，后者是一种语法扩展，允许开发人员同时创建包含HTML和JavaScript的元素。实际上，开发人员可以使用JSX创建的任何内容也可以使用React JavaScript API创建。React元素比DOM元素更强大，并且是React应用程序的最小构建块。

React组件是构建块，可以确定要在整个web应用程序中使用的独立且可重用的部分。

Vue

Vue用于开发用户界面和SPA，是一个开源的MVVM前端JS库。我们称其为渐进式框架，与其他工具一起用于前端开发。Vue之所以受欢迎，归咎于其多功能性、高性能以及在web应用程序上的最佳用户体验。

使用Vue时，开发人员通常会在ViewModel层上工作，确保以一种允许框架呈现最新视图的方式处理应用程序数据。

Vue的模板语法将可识别的HTML与特殊指令和功能结合在一起。该语法使开发人员可以创建View组件。

现在的Vue，组件可重用、独立自足、体积也小。其扩展名为.vue的SFC或Single File Components有HTML，JavaScript和CSS，因此所有的相关代码放置于一个文件中。

在比较大的Vue.js项目中，我们通常建议使用SFC来组织代码。要将SFC转换为有效的JavaScript代码，你需要使用诸如Webpack或Browserify之类的工具。

用途和范围

Angular

Angular最适合大型和高级项目。包括但不限于：

• 开发渐进式Web App（PWA）。
• 重新设计网站应用程序。
• 建立基于内容的动态网页设计。
• 创建需要复杂基础架构的大型企业应用程序。

React

React来自MERN堆栈家族——一种以构建复杂的业务应用程序而闻名的技术堆栈。当与Redux或MobX或任何通量模式的库一起使用时，React将成为一个强大的工具。React最适用于以下这些项目：

• 对于涉及包含导航项，折叠/展开的手风琴部分，活动/非活动状态，动态输入，活动/非活动按钮，用户登录，用户访问权限等许多组件的应用程序。
• 对于范围囊括规模性和成长性的项目，因为React组件具有声明性，因此可以轻松处理此类复杂结构。
• 当UI是web应用程序的核心时。

Vue

Vue最适合解决短期问题，因为Vue具有可接受且快速的学习曲线。它可以轻松地与现有代码块集成。遇到以下情况时，你可能需要会Vue：

• web应用程序的开发项目具有动画或交互式元素。
• 不需要高级技能的原型制作。
• 需要与多个其他应用程序无缝集成的应用程序。
• 更快发布MVP。

性能和发展

Angular

Angular性能的一些亮点包括：

• 具有无缝的第三方集成，以增强产品/应用程序的功能。
• 提供强大的组件集合，从而简化了编写，更改和使用代码的过程。
• “预编译器”赋予了更快的加载速度和安全强度。
• MVC模式通过视图分离来减少后台查询。
• 促进将依赖注入用作将组件解耦的外部元素，这些组件为可重用性以及简化管理和测试铺平了道路。
• 通过将任务分成一个个逻辑块来减少网页的初始加载时间。
• 完全可自定义的设计。
• 有助于将HTML和TypeScript编译为JavaScript——从而在浏览器开始加载web应用程序之前大大加快了代码的编译速度。

React

在性能方面，React与Vue旗鼓相当，因为两者具有相同的架构，即与DOM交互。React的web开发性能如下：

• 支持绑定和tree-shaking优化——这对于减少最终用户的资源负荷至关重要。
• 由于提供了单向数据绑定支持，因此可以更好地控制项目。
• 可以轻松地对其进行测试和监视。
• 最适合需要频繁更改的复杂应用程序。

Vue

给Vue最贴切的标签是快速得令人难以置信。其性能指标是：

• 更快的学习曲线。
• 高效又复杂的单页应用程序。
• 高端功能带来的多功能性。

Angular，React，Vue的优点

Angular

其良好的文档化有助于理解模板，表单，引导程序，以及有关体系结构、组件以及组件之间交互的详细信息：

• 平滑的双向数据绑定。
• MVC体系结构。
• 内置模块系统。
• 大大减少了网页的初始加载时间。

使用Angular构建的应用程序包括：

Youtube TV | PayPal | Gmail | Forbes | Google Cloud

React

• 模块化的结构使得具备了灵活的代码。节省时间和成本。
• 促进复杂app的高性能。
• 在React前端开发期间更易于维护代码。
• 支持适用于Android和iOS平台的移动本地应用程序。

使用Angular构建的应用程序：

Tesla | AirBnB | CNN | Nike | Udemy | Linked-in

Vue

• 体积小巧，便于安装和下载。
• 正确使用后，可重用Vue。
• Vue.js允许更新web页面中的元素时无需呈现整个DOM，因为它是虚拟的。
• 需要较少的优化。
• 促进web应用程序的开发，并允许专家将template-to-virtual DOM与编译器分开。
• 经过验证的兼容性和灵活性。
• 不管应用程序的规模如何，代码库保持轻便。

用Vue构建的应用程序：

Gitlab | Spendesk | Behance | 9Gag | Wizzair | Nintendo

社区支持与学习曲线

React JS库是由Facebook创建的，有一个大型社区，里面的编码人员和开发人员为最重要的问题提供解决方案。针对Angular的大型社区里的开发人员，则对最具挑战性和最怪异的案例给出了答案。Vue具有良好的生态系统，具有React库和Angular框架的所有合理特性。至于学习曲线，React是学习和适应起来最快的，其次是Vue以及Angular。

写在最后的话

从前端开发的角度来看，React将成为2021年学习起来最快的技术。Vue和React都是轻量级的，直观的并且性能完美无缺。

（文本完）