目录
如今,大多数大型 Web App 都是使用给力的 JS 前端开发框架构建的。其中人气最高的两个框架是 —— React 和 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 通常需要更多代码完成“图灵等价”的功能,但鼓励更有组织的代码库。
总体而言,这两个框架在现代软件开发的发展中举足轻重,并且拥有令人目瞪狗呆的活跃社区。
欢迎在本文下方群聊自由言论,文明共享。谢谢大家的点赞,白白~