Vue 与 React：2021 年该选择哪个？

在开始一个新的Web 应用开发项目时，任何开发人员都会面临一个棘手的难题：这个项目的最佳框架是什么？虽然我们无法给出明确的答案，但我们想提出一个新问题：Vue 与 React：2021 年该如何选择？

在为现有项目选择哪个JavaScript 框架时，通常会在Angular、React 和 Vue 之间进行选择。在本文中，我们将对React 和 Vue进行正面比较。

1.什么是Vue？

2.什么是 React？

3. Vue 与 React 性能对比

4. Vue 与 React 的受欢迎程度对比

5. Vue 与 React 状态管理

6. Vue 和 React 之间的主要区别

7. SEO：Vue 与 React

8.Vue 和 React 哪个更好？

9.Vue 会取代 React 吗？

10. React 比 Vue 更容易吗？

11. 使用 React 构建的应用程序示例

12. 使用 Vue 构建的应用程序示例

13. 结论：Vue 与 React：2021 年该选择哪个？

1.什么是Vue？

Vue于 2014 年首次公开亮相，其创建者尤雨溪将其称为“渐进式框架”。这个流行的JavaScript 框架最初仅在中国使用，现在已在全球范围内使用，并且是开发直观用户界面以及单页应用程序 (SPA) 的最佳选择之一。

Vue具有双向绑定功能，并使用虚拟 DOM——真实 DOM 的副本。然而，人们被这个框架吸引的主要原因是它的渐进式设计——这使得开发人员可以逐步迁移现有项目。这可以通过逐个迁移每个功能来实现。

Vue 是一个开源项目，由其不断壮大的社区持续开发和维护。许多知名公司都与 Vue 合作，例如 BuzzFeed、Grammarly、任天堂、Trustpilot 等等。

2.什么是 React？

从技术上讲， React不是一个框架，而是一个JavaScript 库，用于在网站和 UI 上实现交互元素的Web 开发。React 由 Jordan Walke 在 Facebook 工作期间创建，也用于创建 SPA 和移动应用程序。

这个 JS 库提供了很大的灵活性，因为它使用组件（独立的代码片段）来创建更复杂的逻辑和 UI。它还使用虚拟 DOM 与 HTML 文档交互，但所有元素都表示为 JS 对象。

3. Vue 与 React 性能对比

说到性能，由于Vue 和 React有一些共同点，所以它们的性能大致相当。它们都使用 延迟加载 来提高性能并缩短加载时间，以及虚拟 DOM。

Vue 和 React都拥有出色的性能，各有优势。例如，Vue 在内存分配和启动时间方面略胜一筹，而 React 在运行时则占据领先地位。

然而，在某些情况下，两者的性能存在明显差异。例如：

• React 组件状态的修改会触发其子树中所有组件的重新渲染。
• 在 Vue 中，这些依赖项会被跟踪，因此可以防止不必要的重新渲染。

两者之中，Vue 可以处理高帧率——10 帧/秒，而 React 为 1 FPS。

4. Vue 与 React 的受欢迎程度对比

衡量框架或库受欢迎程度的一个好方法是查看其 Github 存储库有多少颗星。

如您所见，自 2017 年以来，Vue 一直与 React 并列为最受欢迎的框架。

截至 2021 年，Vue 在 Github 上拥有 18.1 万颗星，堪称最受欢迎的JavaScript 框架。React 紧随其后，拥有 16.5 万颗星，并且还在持续增长。

根据 Google Trends 的数据，在过去 12 个月中，各大公司都在积极招聘 React开发人员，其次是 Vue 和 Angular，两者竞争激烈。综合来看，React 职位最受欢迎，其次是 Angular，最后是 Vue——​​这就是2020 年的就业市场现状。

另一个因素是每个框架的用户。例如，Vue 的用户包括 Trustpilot、宝马、Vice、任天堂、Adobe Portfolio、Euronews 等。另一方面，BBC、Airbnb、Facebook、PayPal、Netflix、Instagram 以及许多其他知名公司则使用 React。

5. Vue 与 React 状态管理

状态是指所有 UI 组件之间共享的数据。当然，随着系统规模的增长，管理状态会变得越来越困难。在这种情况下，React 提供了一种修改状态的单一方法，从而简化了调试过程。

Redux

在 Vue 中，管理方式略有不同。由于可以使用对象的 data 属性来修改数据，因此本地状态不再必要。不过，对于大型应用，你仍然需要一个外部库来进行状态管理。

Vuex

6. Vue 和 React 之间的主要区别

如何在 React 中编写 Hello World？

如何在 Vue 中编写 Hello World？

7. SEO：Vue 与 React

如果您使用React或Vue，您将获得一个 SPA（单页应用程序），它需要 JavaScript 来显示页面上的任何内容。最近，谷歌宣布他们的爬虫现在可以渲染分页的 JavaScript 并对其进行索引。然而，大多数 SEO 专业人士都认为，即使是现在，谷歌也很难读取和索引这样的页面。

解决这个问题的关键是确保 Google 不需要 JavaScript 来渲染你的内容。为此，你可以使用服务器端渲染 (SSR) 来实现。这意味着在首次将文件发送给用户之前，你需要在服务器上运行 JavaScript 代码。

8.Vue 和 React 哪个更好？

这个问题没有明确的答案。为了尽可能接近真相，我们应该承认，这取决于开发者的需求——在特定情况下，每种选择都有其优劣。

因此，让我们分析几个常见的情况，在这些情况下，您的使用方法可能会产生很大的影响：

如果满足以下条件，Vue 会更好：

• 您需要一个尽快有效的解决方案
• 你的应用不太复杂，或者你需要它非常快
• 您想将现有项目迁移到新技术，但资源和时间有限
• 您的团队主要由 HTML 开发人员或初级开发人员组成
• 您更喜欢干净的代码和 HTML 模板

如果满足以下条件，React 会更好：

• 您想要开发复杂的应用程序或 SPA
• 您计划在未来大幅扩展应用程序的功能
• 你需要一个移动应用程序
• 你的团队更喜欢 JavaScript 而不是 HTML
• 您的团队中有经验丰富的 React 开发人员

假设您想要...

使用模板创建 Web 应用程序

如果您使用 Vue，则需要向 HTML 布局添加属性。由于 Vue.js 拥有模板功能，它在速度和简洁性方面具有明显的优势。

React 不使用模板，因此你需要在 JS 中启动 DOM。使用 React 中的模板需要你具备高级 HTML 知识。

创造一些简单而有效的东西

总体而言，Vue 的设计更简洁。你可以直接从浏览器上传应用程序，并将 Vue 库无缝添加到整个项目中。你可以轻松更改值——框架会自动在 DOM 中进行相应的更改。

然而，与 React 相比，Vue 无法跟踪数据的编辑和删除。React 会评估之前和当前的操作，并将任何相关信息添加到 DOM。这就是为什么你无法直接使用 React 修改任何值的原因。

开发一款袖珍型快速应用程序

这两个框架的工作原理类似。然而，它们之间仍有优化的空间。Vue 速度稍快一些，体积也更小——25.6 KB。

React 的大小是它的两倍——37.4 kb 的 DOM + 11.4 kb 的库。然而，React 的优势在于它拥有更广泛的 API 选项。

开发企业级复杂应用程序

React 更适合大型应用——它更灵活，可定制性更强。Vue 使用模板，使开发过程更简单、更快捷。然而，随着复杂度的提升，这不再是一个优势。大多数情况下，React 的代码可复用，并且将来可以轻松重构。

创建 Web 和移动应用程序

说到移动应用开发，毫无疑问：React Native 是跨平台开发中最常用的。有了它，你可以通过类似 React 的组件在 Android 和 iOS 之间复用几乎 99% 的 JavaScript 代码。

尽管如此，Vue 也为移动端提供了一些选择。首先是 NativeScript，你可以用它用 Vue 编写应用程序，并将其编译成原生的 Android 或 iOS 应用。然后是 Vue Native。它出现于 2018 年，所以（目前）还不那么流行，但你可以用这个框架来创建跨平台的原生移动应用。

9.Vue 会取代 React 吗？

做出这样的预测确实很难，尤其是考虑到这些框架各自适用于不同类型的应用。不过，我们认为可以肯定地说，React 在性能方面比 Vue 有一些优势。

我们必须承认，Vue 框架仍然是一个相当新的焦点——它还需要一些时间和精力才能达到 React 生态系统的规模。

10. React 比 Vue 更容易吗？

对于小型应用程序来说，Vue 无疑是佼佼者。正如我们之前提到的，它非常易于使用，模板让一切运行速度更快等等。然而，当你的应用程序规模越来越大时，情况就变了——这时 React 就派上用场了。

从长远来看，React 比 Vue 更高效、更易用。其中一个重要原因是，它与 React Native 结合使用，让你能够轻松开发 Web 和移动应用程序，而无需付出太多额外努力。

总而言之，这个问题的答案可以概括为：

• 如果您熟悉 JavaScript（例如 NodeJS 社区），那么 React 对您来说会更容易、更高效。
• 如果您不熟悉 JS（例如 Laravel 社区），Vue 可能是您的更好选择，至少对于初学者来说是这样。

11. 使用 React 构建的应用程序示例

Digitalya 是一家同时开发Web 应用和移动应用的软件开发公司，因此我们一直使用 React。以下是我们案例研究中的一些应用示例：

1. FeetUp®

这是一款旨在帮助瑜伽练习者在家中舒适地掌握倒立技巧的应用程序。FeetUp® 拥有丰富的瑜伽、健身和放松课程数据库，为世界各地的用户提供卓越的用户体验和优质的内容。

为了这个项目，我们构建了一款移动应用，可以同时向大量受众提供视频和音频内容，同时追踪他们的行为。我们添加了一个高度可定制的区域，用于上传内容、审核评论和发送通知。此外，该应用还具备社区功能和集成商店，旨在提供最佳体验。

2. SEI-医疗保健

这是一个 Web 应用，它有一个实时可视化仪表盘，用于追踪用户在医学测验中的互动情况。这些测验有时间限制，并包含各种问题——用户可以为每个问题选择不同的答案。

我们构建了一个以用户为中心的可视化仪表板，可通过安全身份验证访问。该 Web 应用基于先进的算法，通过一组预定义的规则分析收集到的数据。它展示了结果的 3D 模型，并可根据用户角色和其他所选偏好进行筛选。

12. 使用 Vue 构建的应用程序示例

1. FontAwesome

这是一个使用 Vue 构建的网站。FontAwesome 是开发者的绝佳资源。您可以找到各种各样的图标、样式、徽标以及更多资源——易于访问，方便您轻松获取和使用。

该网站的构建充分考虑了用户体验，您可以注意到该网站的复杂度低且易于使用。

2. Habitica

这是一款很酷的效率应用，可以用来追踪你的习惯养成过程。它的独特之处在于，你养成的每一个好习惯，或者达成的任何成就，都会在游戏中获得奖励。此外，如果你的计划偏离了轨道，你也会受到惩罚。

移动应用程序 - Android 和 iOS 是使用 Vue 框架构建的，并提供了一种组织生活方式的创造性方式。

13. 结论：Vue 与 React：2021 年该选择哪个？

每个框架都各有优势。例如，Vue 更小巧、速度更快，其模板功能使其更加便捷，并且语法也更加简化。而 React 则为更大、更复杂的应用提供了更大的灵活性。此外，它更易于测试，更适合移动应用开发，并且在遇到问题时，您还可以获取更多信息。

因此，答案取决于你计划开发什么。针对特定问题选择工具的最佳方法是测试不同的选项。你可以尝试使用这两个框架来处理一些较小的项目，然后选择最适合你的那个。

最初发表于https://digitalya.co/blog/vue-vs-react-what-to-choose-in-2021/