神仙打架：Vue vs React

大家好，这里是大家的林语冰。坚持阅读，自律打卡，每天一次，进步一点。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Vue vs React: Comparing frontend options in 2023。

本期共享的是 —— 两大人气最高前端框架 Vue vs React 的横向比较，辅助大家根据自己的需求理智地选择适合的框架。

如今，大多数大型 Web App 都是使用给力的 JS 前端开发库构建的。其中人气最高的两个库是 —— React 和 Vue。最近，我们测评了 React vs Vue。

Vue 更年轻，某种意义上而言，Vue 挑战了一大坨 React 的实质设计原则，尤其是数据绑定。但 Vue 3 大量借鉴了 React，或者说深受 React 启发，并且围绕当今的功能和约定，还有一大坨值得深度学习的东东。在本文中，我们会探讨两者的异同点和优缺点。

Vue 是什么鬼物？

Vue 是一个开源库，最初由谷歌工程师尤雨溪开发。Vue 遵循 MVVM 模型，将 UI 与底层数据模型解耦。Vue 是一个声明式库，开发者只需更新数据对象，Vue 就会执行适当变更。

粉丝请注意，Vue 的使用方式十分灵活。Vue 不需要替换整个网站的堆栈。举个栗子，开发者可以使用 Vue 来增强纯 HTML，而无需 JS 构建步骤。虽然但是，Vue 也可以作为一个全栈库来实现，满足经验丰富的开发者需求。

Vue 的设计包括但不限于：

• 组件支持。与 React 不同，Vue 本质上并非组件筑基，因为 Vue 可用于修改现有 HTML。虽然但是，Vue 确实支持可复用组件，比如可以接受 prop 值的可复用 UI 部分。
• 虚拟 DOM。Vue 使用虚拟 DOM 更新和渲染 UI。虚拟 DOM 使 Vue 变得很快。更新虚拟 DOM 后，Vue 只是简单地协调与实际 DOM 的差异。诸如 Svelte 之类的某些库，通过规定 DOM 修改的工作机制来反驳虚拟 DOM，并且大型社区关于虚拟 DOM 对性能的影响存在不同声音，但普遍的共识是，诸如 Vue/React 之类的框架利用虚拟 DOM 来超越 Angular 等旧框架。
• 数据对象支柱。Vue 的中心是一个简单数据对象。
• 内置指令。Vue 推出了一系列内置指令，比如 v-if/v-for，它们期望表达式对 DOM 执行响应式更新。
• 响应式状态支持。通过 ref() 函数，Vue 支持响应式状态。相反，React 的状态变量通过事件处理程序更改，且这些状态更改可能会触发视图更新。
• 支持 SPA。Vue 可以用作 SPA 库，其中浏览器从服务器加载单个文档，浏览器的 JS 引擎负责其余部分。
• 给力的调试开发工具。Vue 推出了一个浏览器插件，使开发者能够可视化状态和组件树。
• 支持 SSR（服务端渲染）。Vue App 可以合并服务器的首个 HTML 渲染，加快用户的 App 加载速度。

React 是什么鬼物？

React 是 Meta（原脸书，社交网络公司）发布的开源 JS 库。即使在今天，React 仍然由 Meta 以及开发者社区维护。React 是一个声明式库 —— 开发者通过状态数据填充和操作代码视图。随着数据状态的变化，React 会高效地更新视图。

React 的设计包括但不限于：

• 组件筑基架构。React 组件本质上是可复用的。此设计可以轻松构建具有相似视图和子视图的复杂 App。万物皆可为 React 组件，包括 App 本身。React 组件相互嵌入，使用 props 向下传递数据。
• 虚拟 DOM。与 Vue 一样，React 使用虚拟 DOM 更新和渲染 UI。
• 函数式支持。React 从严格支持类筑基组件、发展到轻量级函数式组件。函数式组件只是函数；它们接受 props 作为参数，使用 React 的 useState 钩子函数支持状态，并返回视图。
• SSR。与 Vue 一样，React 支持 SSR，其中 HTML 由服务器编译，派发给用户，然后在 React App 安装后水合。
• RSC（服务器组件）。除了 SSR 之外，RSC 是专门在服务器上渲染的组件。这是一种设计模式，使逻辑能够存在于只由服务器调用和访问的组件中。这对于注入漂亮的数据效果拔群，而无需额外的后端调用。
• 单向数据流。在 React 中，数据只沿着组件树流动。换而言之，子组件不能直接改变父组件传递的状态。相反，子组件调用提供的变更函数，该函数会渗透到拥有数据的父容器。
• JSX。React 使用 JSX（一种类 HTML 语法）作为其标准模板库。JSX 允许 JS 逻辑和 HTML 标签优雅混合。（Vue 也支持 JSX，但使用 HTML 模板作为其标准）。
• 防止 prop drilling 的支持。使用 React 的 useContext 函数，开发者可以将 props 传递到组件树中，而无需手动传递每个组件。
• 支持 SPA。React 可以像 Vue 一样用作 SPA 库。
• 给力的调试开发工具。与 Vue 一样，React 推出了浏览器插件，可以辅助可视化 App 的状态。

Vue 的优缺点

Vue 有一大坨优点，这就是它能够迅速吸引强大开发者基础的原因。

• 轻松的学习曲线。因为 Vue 只能用于向现有 HTML 添加交互性，所以它对于初学者或从未使用过 JS 优先库的开发者十分友好。
• 双向数据绑定。虽然对某些道友而言这是短板，但双向数据绑定对于某些优先考虑便利性和灵活性、而不是严格结构的开发者而言很有吸引力（Vue 也可以实现单向数据绑定。）。
• 集成。鉴于其开放式方法，Vue 通常可以与其他 JS 库（包括 React/Angular）集成。这使得 Vue 对于可能与 App 的更大逻辑分离的视图而言效果拔群。
• Vite。Vite 是一个超快、人气爆棚的工具框架，由 “Vue 之父”构建，与 Vue “梦幻联动”。虽然 Vite 可以与包括 React 在内的其他库一起使用，但它因其 HMR（热模块替换）支持而受到开发者社区的喜爱。HMR 允许在不重启 App 的情况下添加和删除模块。

虽然但是，Vue 也有某些短板：

• 开放式结局。虽然某些道友可能认为这很 pro（专业），但 Vue 的开放式设计意味着，Vue 项目可能看起来彼此一龙一猪，随着 Vue 项目的增长和蔓延，这可能会让开发小白变得更头大。虽然但是，Vue 文档确实推荐了某些可以搞定此问题的最佳实践。
• 响应式复杂性。组件附带一个 watcher，如果数据变化，该 watcher 会重新渲染。虽然但是，这只适用于影响用户的特定数据。当数据变更是否为反应式时，这可能会让开发者变得头大。
• 较小的插件可用性。与 React 等大型库和 Angular 等旧框架相比，Vue 的开发者社区规模较小，而且，用于更小众、利基功能的插件和外部库也更少。

在考虑 Vue 是否适合其需求的英语开发者中，大家可能会看到的一个常见对话是，Vue 并不总是具有与中文文档相同的水平和可用性。虽然但是，Vue 的网站有出色的翻译，有相当大的在线社区，并且被一大坨资金雄厚的英语公司使用。

React 的优缺点

React 有一大坨优点：

• 极快。React 的虚拟 DOM 技术使页面重新渲染变得快速且轻量。它最大限度地减少了 DOM 树的变化量。举个栗子，App 的导航栏不会在每次模型更改时重新渲染。
• 开放式代码。对于一大坨开发者而言，React 不拘一格的组织代码库的方法，使 React 能够灵活轻松地创建具有特定需求的复杂 App。
• 巨大的社区。React 开发者拥有数以千计的工具和附加库，可以无缝衔接到 React App 中。对于常见的 UI 功能，比如文件选择器或 Markdown 编辑器，有一大坨可用选项。大多数第三方库都附带预构建的 React 组件以及纯粹的 JS 官方库。
• 更易调试。因为 React 是声明式的，所以开发者不需要调试增量渲染，只需要调试错误配置的状态或视图。
• RSC。虽然 React 和 Vue 都支持 SSR，但有且仅有 React 允许在组件内发生服务端逻辑，这是一种巧妙的设计模式，可将纯后端逻辑的结果嵌入到前端。

虽然但是，React 当然也有短板：

• 学习曲线。通常，与 Angular 等更具规范性的框架相比，React 的优点之一是更易学习。虽然但是，相对于 Vue，某些道友发现 React 需要付出更多的精力来学习，尤其因为 Vue 可以直接添加到现有 HTML 项目中。诚然，对于从头开始的产品，假设开发者希望以稳健的方式使用 Vue，那么两者之间的学习曲线会更小。
• 更严格的数据操作。React 信徒会认为这是 React 的一个论点，但 React 的定向数据范式可能会以错误的方式激怒某些开发者，尤其如果它们是从 Angular 等双向数据绑定框架迁移的过来人。

使用 Vue 的最佳时机

当开发者满足下述条件时，Vue 天下第一：

• 想要选择一个对现有项目造成最小改变的库
• 需要一个具有双向数据绑定范式的库来满足开发者的喜好
• 更喜欢可以轻松与其他库组合的库

使用 React 的最佳时机

当开发者满足下述条件时，React 天下第一：

• 想要选择一个更严格控制数据操作方式的库
• 想要进军一个庞大的软件包和库社区
• 想要让 React 与 React Native“梦幻联动”，React Native 是 React 的孪生 App 库，具有相似的范式

Vue vs React

与大多数比较一样，没有绝对的赢家 —— 更多取决于团队的优先事项。在 Vue 早期，某些道友会得出这样的结论：对于更大、更复杂的产品而言，React 是更好的竞品。虽然但是，如今，Vue 和 React 都十分给力，但在数据管理方式上有某些不同的模式。

普遍观点是，Vue 十分适合需要大量灵活性的团队，而 React 十分适合需要具有一定灵活性和一定控制力的开发过程的团队。另一个框架是，Vue 通常需要较少的代码（因为数据可以直接变更），但可能会意外创建更混乱的代码库。React 通常需要更多代码完成“图灵等价”的功能，但鼓励更有组织的代码库。

总体而言，这两个库在现代软件 App 的发展中举足轻重，并且拥有令人喵瞪狗呆的活跃社区。

本期话题是 —— 你是 Vue 爱好者还是 React 虔信徒，以及为什么？

欢迎在本文下方群聊自由言论，文明共享。谢谢大家的点赞，掰掰~

《前端 9 点半》每日更新，坚持阅读，自律打卡，每天一次，进步一点。

原文链接：https://juejin.cn/post/7333027152138960905 作者：人猫神话