前端框架趋势: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 的原因。



相关文章
|
8月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
785 1
|
9月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
543 83
|
6月前
|
JavaScript 前端开发 API
对比Vue框架与React库的主要区别
在选择Vue还是React时,考虑项目的需求、团队的熟悉程度和个人偏好至关重要。如果项目需要快速原型开发和较小的学习曲线,Vue可能是更好的选择。相反,如果项目需要更大的灵活性,或者项目团队已经有React的经验,那么React可能是更合适的选择。
337 13
|
8月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
368 22
|
7月前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
148 1
|
8月前
|
人工智能 自然语言处理 JavaScript
用 CodeBuddy 搭建Vue框架 像呼吸一样简单
本文介绍如何借助 CodeBuddy 快速创建 Vue 项目。CodeBuddy 是一款支持自然语言编程的工具,能根据用户需求自动生成代码,降低开发门槛。文章详细说明了通过 CodeBuddy 创建 Vue 项目的步骤,包括解决项目创建失败的问题、自动补全代码功能以及启动开发服务器的方法。无论开发者经验如何,CodeBuddy 都能显著提升效率,让开发更专注创意实现。
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是,性能优化是一个持续的过程,需要根据具体的应用场景和性能问题进行针对性的优化。同时,不同的项目和团队可能有不同的优化重点和方法,要结合实际情况灵活运用这些优化策略,以达到最佳的性能效果。
679 158
|
10月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 前端开发 算法
vue和react 哪个更强大
vue和react 哪个更强大
277 3
|
12月前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
300 10

热门文章

最新文章