前端框架趋势:React与Vue深度对比

简介: 前端框架趋势:React与Vue深度对比

为什么写这篇文章?

最近我在开发一个 real-time Web 开源库,但是我要和团队讨论,这个库应该优先支持某些框架。

为此,我需要做一下开源框架的市场调研,拿到一些数据。

此外,我前段时间写了一篇文章,通过概念和语法对 React 和 Vue 进行了简单的对比,但是有些掘友认为深度不够,所以这篇也可以视作上一篇的补充。

前端框架大比拼:2022年的Vue与React谁更胜一筹?

这一次,我会进行更加深度全面的对比,通过多个维度和真实数据来让大家搞清楚到底谁是 2022 年最强前端框架。


个人看法


我使用 React 和 Vue 的时间都超过 6 年,这两个框架都是很优秀的前端框架,而且在各大 IT 社区每年的统计和调查中都会被赋予最流行、最受欢迎、最常用的 Web 框架的称号。这两种框架都为 Web 开发人员提供了高效开发应用的各种方式,同时具备了非常大的影响力和生态环境。

所以我不会讨厌任何一个框架,也绝对不会攻击任何一个框架。我只是想做个对比,只是想让大家搞清楚它们之间的差距、优势劣势和不同。从而更加清楚自己应该选择哪个框架。


Vue 简介


2014 年由独立开发者 EvanYou 开源,他是前 Google 员工,他想创造一个框架,将 Angular、Ember 和 React 等最受欢迎的框架中的最佳实践结合起来,让编写 Web 应用更快、更容易、更轻松。现在 Vue 由 Vue.js Core Team 开发维护。


React 简介


2013 年由 Facebook 开源,并由这家公司维护。之前曾有段时间大家对 React 的开源许可证存在质疑,但是目前它在 MIT 许可证下运行。React 有企业的支持,在未来有着更强的稳定性。


相似之处


  • 虚拟 DOM:两者都有虚拟 DOM,都只会更新那些已经修改的对象,这样可以节省 DOM 操作的时间和资源。
  • 基于组件的开发模式:两者都有大量的组件库,可以提高代码的重用和开发过程的效率。
  • 专注于视图:两者都只关心渲染视图,像路由、状态管理等独立的部分都由其他库去完成。
  • JavaScript:两者都依赖 JavaScript。


不同之处


  • 语法:两者的差异主要是语法。默认情况下,Vue 使用 SFC,React 使用 JSX。

在 React 中只有 JSX,而 Vue 中将 HTML、CSS 和 JS 分离了。所以很多初级前端开发者可以很好的学习 Vue,而学习 React 需要对 JavaScript 相对有一定要求。这也是更多新手前端开发者和初级前端开发者更热爱 Vue 的一个原因。


详细对比

人气和社区

Github


Github 是全球最大的开源社区。

Vue React
star 199k 194k
commit 3508 15141
contributors 345 1571
used by 2.8m 11.2m

可以看到,Vue 除了 star 略微领先以外,提交数、贡献者和用户都低于 React 5 倍左右。


Stack Overflow


StackOverflow 是全球最大的程序员技术交流社区。

React 有 691985 个结果。

image.png

Vue 有 126478 个结果。

image.png

React 大概是 Vue 的 5 倍。


builtwith


buildwith 是检测某项技术有多少网站在实际使用的社区。

使用 React 的网站有 10710588 个。

image.png

使用 Vue 的网站有 1982621 个。

image.png

使用 React 的真实网站大概是 Vue 的 5.4 倍左右。


npm trends


npm trends 是一个分析 npm 下载趋势的社区。

这是 Vue 和 React 过去 5 年的对比。

image.png

最新的一周,React 下载量是 16539721,Vue 是 3439662。两者相差大概是 5 倍。


JetBrains


JetBrains 每年都会有程序员调查,在去年的调查中,最受欢迎的 JavaScript 框架是 React。不过 Vue 也在逐年上升。

image.png


StateOfJs


stateofjs 是一个每年都会调查 JavaScript 生态的网站。

它的最新数据如下:

image.png

可以看到 React 的使用程度遥遥领先,仅次于 Webpack 和 Express。Vue 还没有过中线。

想学习 React 的用户数量排到了第 6 位,Vue 则排到了第 12 位。

性能

krausest


krausest 是一个测试各大框架性能的网站。

基准测试是在 MaBook Air M1(16 GB RAM,OSX 12.5)、Chrome 104.0.5112.79 (arm64))上使用 puppeteer 基准测试驱动程序运行的。

对比如下:

image.png

可以看到 Vue3.2 会比 React 18.2 的性能更强。

不过性能的最终结果取决于前端工程化、前端性能优化工作和实际应用的大小。


生态


在生态建设上,React 和 Vue 的路线是不一样的。

Vue 的 Cli、路由和状态管理,都是 Vue 的核心库的一部分,受到官方支持和维护。

但是 React 团队只负责维护 React 这一个项目,脚手架工具、路由和状态管理都来自于第三方的社区开发者。


我建议你要学什么?


对比结束了,最后我送给你一些个人的忠告。

在开始之前,我先聊几句自己的亲身经历。

我曾经在上海工作过一年,在某家互联网企业担任前端研发经理。

当时由于前任前端研发经理突然离职,加上前端团队自身的一些问题,导致人员流动频繁,团队成员极其不稳定。我是被技术中心负责人紧急招聘过来的,属于临危受命。

曾经有一段时间,我在负责全职招聘。因为那时整个前端团队就只剩下三四个人了。

最忙的时候,我甚至会停止手上的所有工作,全职招聘。一天刷的简历不会低于 1000 份,1000 份什么概念?平均每 3 到 5 分钟一份简历,不吃不喝也要刷 10 个小时左右。那时候我每天工作时间会超过 16 个小时,每天都会熬夜到凌晨三四点,然后睡在公司,第二天早上继续工作。现在想想,那时压力真的很大。不过在当时并没有这种感觉,反而很自然地融入了进去。

这是当时我在 BOSS 直聘上面的排名,全上海排到第 2 名。可想而知我沟通和面试了多少位前端。

image.png

我说了这么多,就是想表达我会比大多数前端开发者更懂前端开发者。

当时在上海的前端行情,主要集中在 Vue 和 React 两门框架上。求职者的 Vue 和 React 的比例大概是 5:1 到 7:1 之间。具体数据我没统计,但是大概只这样。我相信这能够代表整个中国的前端行情。很多初学者认为 Vue 的学习门槛低,容易学。所以大部分初中级前端工程师都会 Vue,但是不会 React。

反观招聘方,稍微有些规模的大厂,基本上用 React 的居多,用 Vue 的也有,但是很少。而还有一些中小厂也在用 React,就比如我当时所在的公司。这就形成了和大厂抢人的情况。

为了能挖到人才,就必须提供更高的薪水。

道理就这么简单,所以很多情况下,同级别的 React 开发人员会比同级别的 Vue 开发人员的薪资更高一些。

越到职业后期,这个趋势越明显。擅长 React 的前端架构师会比擅长 Vue 的前端架构师有更多选择的机会。

而且技多不压身,同时掌握 React 和 Vue 的话,同样有更多机会。但是每个人的精力是有限的,同时深入掌握两门功能类似的框架会花费很多精力,也没有这个必要。现代职场鼓励一专多能,找准你的专项,其他就没必要那么深入了。

以上,就是为什么我选择 React 的原因。



相关文章
|
1天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
1天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
1天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
1天前
|
开发框架 缓存 前端开发
|
1天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
1天前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
1天前
|
JavaScript 前端开发 API
Vue与React数据流设计比较:响应式与单向数据流
Vue与React数据流设计比较:响应式与单向数据流
|
1天前
|
JavaScript 索引
【vue】框架搭建
【vue】框架搭建
10 1
|
1天前
|
JavaScript 前端开发 开发者
你知道 React 和 Vue 的区别?
【4月更文挑战第16天】React与Vue是两种流行的前端框架,各有特色。React是JavaScript库,强调组件化和函数式编程,使用虚拟DOM提升性能;Vue是渐进式框架,提供全面解决方案,更易上手。React采用单向数据流和状态管理库如Redux,Vue则有双向数据绑定和响应式系统。组件通信方面,React依赖props和context,Vue更灵活,提供插槽和提供/注入。虚拟DOM实现上,React注重效率,Vue强调易用性。学习曲线方面,React社区活跃但学习难度稍大,Vue文档清晰,易于入门。选择框架应考虑项目需求、团队技能和个人偏好。
11 0
|
1天前
|
JavaScript 前端开发
【干货分享】选择 Vue 还是 React?项目框架选择的实际分析
【干货分享】选择 Vue 还是 React?项目框架选择的实际分析