Angular、React与Vue，哪个框架更好？

作者：陈峻编译 来源：51CTO

【51CTO.com快译】作为开发人员，您一定听说过知名的UI库—React、成熟的前端框架—Angular、以及最新的渐进式框架--Vue。显然，它们都有各种独特的优势和性能指标。本文将和您讨论这三种架构在不同方面的优缺点，以方便您在实际应用中做出选择。

许可证

作为首要考虑的因素，我们通常在选择开源框架或软件库之前，彻底检查它们的许可证。目前，React、Angular和Vue都使用着MIT许可证，因此它们为用户提供了有限的使用程度。您需要在使用之前，认真了解每种许可证的具体含义。

架构

Angular

隶属于MEAN栈的Angular框架，是各个初创企业热门采用的技术栈。它基于TypeScript的Web应用开发完整框架，主要用于构建单页面的Web应用(SPA)。

与原始框架AngularJS不同的是，由于基于组件，因此Angular 2与各种MV*模式并无紧密关联。Angular的结构主要包括了模块(Modules)、组件(Components)和服务(Services)。

在Angular框架中，每个组件都有一个独立的类或模板，可用于定义应用逻辑与元数据(Decorators)。此类元数据可以提供，有关创建和显示其视图所需块位置的指引。

Angular体系架构中的另一个重要因素是，由HTML编写的各种模板。它们可以包括带有特殊指令的Angular模板语法，用以输出反应性数据，并能提交多个元素。

服务作为Angular应用中的一个独特元素，可以被组件用来委派诸如：获取数据或验证输入等业务逻辑任务。虽未明确要求，但是Angular建议用户将应用构造为一组可被重复使用的完全不同的服务。

React

作为一种开源的前端库，React主要被用于开发用户界面。由于这种灵活的前端方案，并未对特定的项目结构有强制要求，因此React开发人员只需几行代码，即可开始使用。

虽然基于JavaScript，但在大多数情况下，React可与JSX(JavaScript XML)结合在一起。后者是一种语法扩展，它允许开发人员同时创建包含HTML和JavaScript的元素。实际上，那些由JSX所创建的任何内容，都可以被开发人员使用React JavaScript API来创建。相比DOM，React不但有着更强大的元素，并且它们是React应用的最小构建块。而React组件则是决定了是否要在整个Web应用中，独立且可重用使用的构建块。

Vue

作为一个开源的Model-View-View-Model前端JS库，Vue可被用于开发用户界面和SPA。由于属于渐进式框架，因此它能够与其他工具一起用在前端开发中。Vue凭借着其多功能性、高性能、以及在Web应用上的用户体验，而广受欢迎。

在使用Vue的过程中，开发人员通常会工作在View Model层上，以确保目标框架通过呈现最新的视图，来处理应用数据。Vue的模板语法能够将可识别的HTML，与各种特殊指令功能相结合。开发人员可以使用该语法来创建视图组件。

Vue中的组件不但可重用，而且体积小且独立。例如，由于扩展名为.vue的单文件组件(Single File Components，SFC)支持HTML、JavaScript和CSS，因此它可以将所有相关代码都集中到一个文件中。

在大型Vue.js项目中，为了使用SFC来组织代码，我们可以借用Webpack或Browserify之类的工具，将SFC转换为有效的JavaScript代码。

意图和范围

Angular

Angular比较适合大型和高级项目。其主要功能包括：

• 可用来开发渐进式Web应用(Progressive Web App，PWA)。
• 可重新设计网站应用。
• 能够设计和建立基于内容的动态网页。
• 可创建需要复杂基础架构的大型企业应用。

React

来自MERN栈家族的React，是一种以构建复杂的业务应用闻名的技术栈。作为一款强大的工具，React可与Redux、MobX或其他流量模式库一起使用。React比较适合如下项目：

• 带有导航项、折叠/展开式菜单、能显示活跃/非活跃状态与按钮、动态输入、用户登录、以及访问权限分配等，带有多个组件的应用程序。
• 由于React组件具有声明性，因此它可以轻松地处理具有增长和可扩展需求复杂项目结构。
• 各种以UI为重点的Web应用。

Vue

由于Vue的学习曲线平缓且容易上手，因此它比较适合解决短期问题。通过与现有代码块的轻松集成，Vue能够被用于如下场景中：

• 需要具有动画、或交互式元素的Web应用开发项目。
• 无需高级技术即可交付原型的需求。
• 需要与多个应用程序无缝集成的应用。
• 需要快速推出MVP(Model-View-Presenter)的需求。

性能与开发

Angular

Angular在性能上具有如下优点：

• 为了增强产品/应用的功能，可与第三方无缝集成。
• 通过提供强大的组件集合，以简化编写、更改和使用代码的过程。
• 其“提前编译器(ahead-of-time-compiler)”能够提升加载时间和安全强度。
• MVC模型通过允许视图分离，来帮助减少后台的查询。
• 促进将依赖项注入，用作将组件解耦的外部元素。这些为可重用性、以及简化管理与测试铺平了道路。
• 通过将任务分成逻辑块，来减少网页的初始加载时间。
• 可完全定制化的设计。
• 有助于将HTML和TypeScript编译为JavaScript，进而加快浏览器在加载Web应用之前的代码编译速度。

React

在性能方面，React可与Vue媲美，毕竟两者都有相同的架构，都能与DOM交互。React在Web开发方面的性能特性如下：

• 支持捆绑，这对于减少最终用户的资源占用是至关重要的。
• 由于提供了单向数据的绑定支持，因此可以更好地控制项目。
• 用户可以轻松地对其进行测试和监控。
• 适合那些需要频繁更改的复杂应用。

Vue

Vue的性能主要体现在如下方面：

• 更平缓的学习曲线。
• 能够高效地处理复杂的单页面应用。
• 提供丰富的高端性能。

各自优势

Angular

• 提供各种模板、表单、引导程序、相关体系架构、组件、以及组件之间交互的详细信息。
• 平滑的双向数据绑定。
• 支持MVC体系架构。
• 内置模块系统。
• 大幅减少网页的初始加载时间。

使用Angular构建的流行应用程序包括：Tesla、AirBnB、CNN、Nike、Udemy、Linked-in。

React

• 凭借着其模块化的结构和灵活的代码，可为用户节省开发时间和成本。
• 能为复杂的应用提供高性能。
• 在前端开发期间，更易于维护代码。
• 支持适用于Android和iOS平台的移动原生应用。

使用React构建的流行应用包括：Tesla、AirBnB、CNN、Nike、Udemy、Linked-in。

• 体积小巧，便于安装和下载。
• 可复用。
• 凭借着虚拟化，Vue.js能够更新网页中的各种元素，而无需提交整个DOM。
• 需要较少的额外优化工作。
• 为增强Web应用开发，它允许专家将“模板到虚拟”(template-to-virtual)DOM与编译器分开。
• 提供可靠的兼容性和灵活性。
• 提供独立于应用规模的固定代码库。

用Vue构建的流行应用包括：Gitlab、Spendesk、Behance、9Gag、Wizzair、Nintendo。

社区支持与学习曲线

• React JS库是由Facebook创建的。它拥有大量的开发人员及其社区，可为各种问题提供广泛的解决方案。
• Angular同样拥有大量的开发人员社区。它们能够为那些极具挑战性的、怪异的问题寻求答案。
• Vue也具有良好的生态系统。

在学习曲线方面，React可供用户快速学习和实践，Vue和Angular则次之。

小结

总而言之，从前端开发的角度来看，学习和使用React是首选。轻量级的Vue和React则更直观，且性能更优。

原文标题：Angular vs. React vs. Vue: Which Framework is Best in 2021?，作者: Nir Sharma

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】