JavaScript 框架比较：Vue、React 和 Angular

每个程序员在开始一个新项目时，都要面临选择：Vue、React 还是 Angular。它们各不相同，而且这些差异是根本性的。然而，所有框架都适合解决这一任务，所以我们只需要讨论它们的效率。

目前没有关于哪个框架使用更多的数据，但我们可以通过分析 Indeed.com 上的空缺职位得到非常有趣的结果：

第一名——React 78.1%

第二名——Angular 21%

第三名——Vue.js 0.8%

第四名——没有提到具体框架 0.1%

StackOverflow 调查的结果略有不同：React 获得了 67% 的“投票”，而 Angular 获得了 42% 的“投票”。

分析完以上所有因素后，我们可以得出结论：React 是最受欢迎的框架。但这是否意味着它也是最高效的呢？答案是否定的，因为一个特定框架的流行仅仅意味着它被用于 Facebook 或 Instagram 等项目。然而，我们可以看到，Vue 在 GitHub 上获得最多“star”的框架。

这就是为什么最好忽略其他人的经验并尝试根据对开发人员至关重要的方面来比较框架。

1.渲染——显示输出

我们需要讨论和比较的 Javascript 框架设计的第一个方面是页面渲染。现代架构采用两种类型的页面渲染：客户端（页面使用最终用户的 PC 资源渲染）和服务器端。

DOM – 文档对象模型 (DOM) 允许访问和更改文档内容、布局甚至结构。每个框架都有各自的 DOM 处理方式，这会影响最终页面在用户屏幕上的渲染效果。

Vue 和 React 会克隆 DOM，处理副本并将结果与​​源文件进行比较。然后，在生成的文档（即用户屏幕上的文档）中，它们仅替换与处理结果不同的部分。这显著加快了页面的加载和渲染速度，从而减少了流量消耗。这对于移动用户来说至关重要。

在 Angular 1.x 及后续版本中，DOM 处理方式截然不同。DOM 被拆分为两个线程，其中浏览器（客户端）负责 DOM 渲染，而主线程（服务器端）负责创建指令以及加载代码和服务。

但这并不意味着渲染是在客户端完成的，可视化仍然由服务器进行。

这个事实意味着 SEO 优化在未来不会出现问题，并且搜索机器人在索引时将获得正确的页面。

2. 组件架构

React 不能被称为纯粹的框架。一般来说，它是某种针对 MVC 模式（模型-视图-控制器，其中模型负责提供数据，视图将模型数据显示给用户，控制器解释用户的操作并让模型提供更改和更新）定制的库。
相比之下，Angular 和 Vue 可以被称为纯粹的、成熟的框架。

如果项目架构基于 React，则意味着你：

• 需要为每个功能搜索并实现额外的库；
• 将根据特定的库调整Web应用程序的功能；
• 会发现很难让其他开发人员参与到项目中，因为每个项目中的每个库的 Web 堆栈都是不同的。

因此，实现架构需要更多时间。低级 API（应用程序编程接口 - 一组预定义命令）需要定制，也需要花费大量时间。
如果您使用 Vue 和 Angular 等现成的框架，则无需为不同用途选择和定制库而烦恼。高级 API 为所有库提供了向后兼容性。这使得其他开发人员无需研究 Web 应用的架构即可加入项目。这些流程的统一性正是成熟框架如此受欢迎的原因。

3. 依赖关系的方向性和类别

React 和 Vue 仅支持单向数据传输，而 React 中的所有对象都是封装的。简而言之，Web 应用的每个组件都可以表示为一个结束过程，在工作完成之前不需要任何用户操作。

然而，React 支持复制和传输组件的状态。如果您启动应用并通知状态已更改，则可以在其他设备上恢复已定义对象的属性。因此，两个设备的渲染将完全相同，并且您将在两个屏幕上看到相同的图像。

Vue 框架的工作原理略有不同。JS 仍然是单向的，但组件可以与模板协同工作，因此输出是纯 HTML。Vue 还支持 JSX，这使得从 React 和类似的库迁移到其他库变得更加容易。

该框架支持创建指令，因此拥有自动化的处理逻辑。您只需添加所需的指令即可实现所需的功能。例如，假设您希望块级元素<div>可移动。您只需在对象属性中添加“draggable”指令即可。之后，您就可以使用鼠标在屏幕上拖动和移动该对象。

Angular 的处理逻辑略有不同。它具备 Vue 的所有功能；然而，对象交互的描述是由模块组件中的服务完成的。
模块化架构更适合开发大型 Web 应用。模块通常用于实现多个功能相似的特性。这可以缩短代码长度并提高处理速度。

MVVM（模型-视图-视图模型）支持在 Web 应用的同一部分中使用相同的数据集解决不同的任务。由于函数之间相互依赖，数据传输是双向的。每个流程都可以启动不同的进程。

4.向后兼容性

更新架构以添加新模块和库的可能性对于每个开发人员来说都非常重要。

• Angular 是一个功能齐全的框架。所有早期版本和组件都与后续版本兼容。您无法直接从 2.0 升级到 3.0；您需要先逐个安装版本之间的所有更新，这无疑会增加应用程序的体积。
• React 是一个完全向后兼容的库。你可以将不同版本的库添加到你的 Web 应用中，并使用属性继承来更新旧版本。
• Vue 是一个渐进式框架（ Vue 创始人尤雨溪如此认为）。它的模块化系统与 React 类似，但同时具备 JS 框架的所有特性，并具有向后兼容性。

5.“技术支持”——文档和社区

选择框架时，不应忽视社区支持。即使是最简单的功能也可能看起来很有挑战性。

项目越复杂，开发人员就越需要查阅所选环境的文档和社区建议。因此，我们认为比较每个 JS 框架的“技术支持”是合理的。

反应

Reach 环境的“技术支持”相当棘手。一方面，社区规模庞大，涵盖了来自世界各地的数千名开发者，因此你不会遇到语言障碍。如果你需要“程序员同行”的建议，你可以用任何语言获得，无论是俄语、英语还是中文等等。

然而，主要的缺点在于开源代码以及每天都有新的基于 React 的库出现。查找包含新库的实现、功能和属性的所有信息的文档可能并不容易。

新的模块通常是这样出现的：一些程序员创建一个库来解决项目中的一些特定问题；接下来他们编写手册并在互联网上分享。

Vue

详尽的文档是 Vue 的招牌。然而，推崇它的人却忽略了一点：大多数 Vue 的手册既没有俄语版本，也没有英语版本。

Vue 社区规模较小（尽管它在 GitHub 上很受欢迎），尤其是与 Angular 或 React 相比。甚至 JQuery 的使用率也高于 Vue。

你通常可能需要等待几天才能得到关于如何实现某个功能的答案。但这并不一定意味着最终会有人回答。

如果需要的话，Vue 官方网站上的聊天可能会有所帮助。

角度

与 Vue 和 React 不同，Angular 不仅拥有详尽的文档，还有丰富的使用指南。因此，你甚至不需要社区的帮助就能解决问题。

成千上万的程序员都在使用这个框架。你可以随时提问，甚至不需要访问官方网站，你就可以去 Stack Overflow 和其他一些平台，甚至社交媒体上寻求帮助。

您总是能够找到某人来帮助您解决问题或告诉您在哪里寻找答案。

简而言之

客观评价这些框架确实很难。但这篇评测或许能帮助新手开发者做出决定。让我们总结一下：

1. 如果需要快速掌握环境要点，请选择 Vue 或 React。

2. 如果您之前使用过 Angular 或 React，那么 Vue 将很容易迁移，因为它会生成每个人都熟悉的纯 HTML 代码，并且技巧和窍门与 Angular 基本相同。

3. 如果你计划开发大型项目，最好使用 Angular 作为基础，因为它能保证灵活性和快速渲染。如果你遇到任何问题（你肯定会遇到），其他开发人员的经验可能会派上用场。React 过于庞大复杂，而 Vue 的开发指南还不够完善。

4. 如果您将来希望让其他开发人员参与您的项目，Vue 是您的最佳选择。这个框架不仅易于掌握，而且还允许您自定义 Web 应用程序而不会破坏其架构。

5. 如果您未来计划逐步添加新功能来增强项目，Vue 或 React 或许是您的理想之选，因为它们具有绝对的向后兼容性。
   每个框架都有其优缺点。因此，我们再次建议您：选择开发团队更容易掌握的框架。花费在掌握框架上的时间会无限期地推迟应用程序的发布。此外，项目完成后的技术支持可能会成为内部开发人员的负担，导致他们最终辞职。此外，不要只是坐着等待，查阅可用的资料，学习新知识。Vue 和 React 不断发展，您也应该如此。

这是一篇由 Anatoliy Ulitovskiy 撰写的 mkdev 文章。您可以随时聘请我们的 JS 导师来帮助您！