老板:你为什么要选择 Vue?
大家好,我是 Kagol,Vue DevUI 开源组件库和 EditorX 富文本编辑器创建者,专注于前端组件库建设和开源社区运营。
假如你是团队的前端负责人,现在老板要拓展新业务,需要开发一个 Web 应用,让你来做技术选型,你之前用 Vue 比较多,对 Vue 比较熟悉,希望能在团队内部推行 Vue 技术栈,你会怎么跟老板说呢?以下是我做的一些调研,也许能对你有帮助。
声明:Vue 和 React 都是我很喜欢的前端框架,如有说得不对的地方,欢迎一起讨论交流。
一、Vue 在国内的使用量远高于 React / Angular
- 业界主流前端框架:React、Vue、Angular,从近3年的使用趋势上看,React 稳定在第一,Angular 逐年下降,Vue 持续增长。
- 从受欢迎程度上看,以 Svelte、Solid 为代表的新兴前端框架很受开发者喜爱,不过它们的使用量和生态繁荣程度还远低于三大框架。
- 虽然 React 在国外的份额高于 Vue,但 Vue 在国内的使用量大幅领先于 React,并且呈现出持续增长的趋势,这意味着在国内能更容易招聘到使用过 Vue、熟悉 Vue 的开发者。
图1: Vue 和 React 在全球的使用情况和受欢迎程度对比(来自 StateOfJS 数据)
图2: Vue 和 React 在中国的使用情况对比(来自 CSDN 调查报告)
参考:
- https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/
- https://csdn.gitcode.host/Survey-Report-on-Developers-in-China/survey/
二、Vue 中文资料多,学习曲线平缓,上手快
- 国人开发,美观易读的官方中文文档,除了基本的使用指南和API文档之外,Vue 官网还提供了深色模式、互动教程、演练场和丰富的示例,降低了开发者的学习成本,提升了文档阅读体验。
- 在掘金、知乎、思否等国内技术社区,Vue 的关注者、文章数、讨论数都比 React 高,Vue 相关视频在B站的播放量和评论数总体上也比 React 高,Vue 中文书籍也比 React 的多,这意味着国内的 Vue 开发者拥有比 React 开发者更丰富的中文学习资料,并且在开发过程中遇到问题也能更容易找到解决方案。
- 从代码编写上,Vue 使用模板写法,从传统写法过渡的成本低,而 React 的 JSX 写法需要更多额外的学习成本。
图3: Vue 官方中文文档
图4: Vue 和 React 在国内各技术社区的关注者和内容数据对比
图5: Vue 和 React 在代码编写上的对比
参考:
三、Vue 是渐进式框架,更轻量,性能高
- Vue 是一个渐进式框架,它的设计非常注重灵活性和“可以被逐步集成”这个特点,可以根据你的需求场景,用不同的方式使用 Vue,并轻易地集成到你的现有项目中,不管你的项目是 HTML 网页、Web Components、SPA、桌面端、移动端、WebGL,甚至是命令行终端界面。
- Vue 的体积几乎只有 React 的一半(未压缩情况下),并且 Vue 3.0 的全局 API 和内置组件都支持摇树优化,这意味着用户只需要为他们实际使用到的功能“买单”,未使用的功能代码将不会出现在最终的打包产物中。
- 经过 Benchmark 工具的测试,包括创建数据行、替换所有行、部分更新、选择行、交换行、移除行、追加行在内的所有操作,Vue 都比 React 性能要好,特别是交换行操作,Vue 比 React 性能高出5倍以上。
图6: Vue 和 React 包体积对比
图7: Vue 和 React 性能测试数据
参考:
四、Vue 官方支持的 Web 应用开发工具全面,可持续性好
- Vue 官方提供路由、状态管理、单元测试、静态站点生成等常见 Web 应用开发工具,无需从众多第三方依赖库中做选择,并能获得更好的业务连续性支持;而 React 官方只提供了一个视图层工具,其他必要的 Web 应用开发配套工具都需要依赖于第三方库。
- 在 Awesome 资源大全中,awesome-vue 的资源数是 awesome-react 的6倍,这意味着 Vue 开发者不仅能获得更好的官方工具支持,而且能在社区找到更多配套的 Web 开发工具和学习资源。
图8: Vue 和 React 官方工具和生态对比
参考:
再次声明:Vue 和 React 都是我很喜欢的前端框架,我们的 Vue DevUI 组件以及组件的单元测试都是使用 TypeScript + JSX 语法写的,所以如有说得不对的地方,欢迎一起友好讨论交流。
老板:你为什么要选择 Vue?的更多相关文章
- 我从Angular 2转向Vue.js, 也没有选择React
译者按: 通过使用Angular的经历,作者已经完全转为Vue粉了!我们Fundebug目前还是用AngularJS 1,坦白说,学习曲线蛮陡的. 原文: Why we moved from Angu ...
- 为什么我们从Angular 2迁移到Vue.js(为什么我们没有选择React)
在Rever(www.reverscore.com),我们刚刚使用Vue.js发布了我们的Web客户端的新版本.经过641次提交和16周的紧张开发,我们非常自豪之前做出的决定.8个月前,我们的前端在使 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- Vue.JS 对比其他框架
Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部 ...
- 黑暗圣经---物业公司CTO/CEO改如何给老板推荐物业信息化产品
多年前一次偶然的机会进入到物业信息化行业,在这个过程中认识很多奋战在物业一线的技术大牛.很多时候都会介绍一些朋友给我认识一下,帮我推荐一下我们闻风多奇的物业管理平台.很多朋友看完我们的系统之后都会很开 ...
- Vue.2.0.5-表单控件绑定
基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以 ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- vue 单页面应用实战
1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA ...
随机推荐
- 并发原理 — CPU原子性指令(一)
本篇文章将以Intel CPU作为讨论基础 一.并发的由来 一台计算机有2个cpu,其中CPU1执行程序A,CPU2执行程序B,由于程序A和程序B是两个不同的应用程序,所以它们两个之间并不存在并发问题 ...
- 分布式安装部署MinIO
官方文档地址:http://docs.minio.org.cn/docs/master/distributed-minio-quickstart-guide 前提条件:分布式Minio至少需要4个硬盘 ...
- windows系统下使用bat脚本文件设置 tomcat 系统环境变量
说明:在一个bat文件中设置tomcat环境变量后,不能直接使用,需要另起一个bat文件才能使用 号开头的行不要写在bat文件中 # tomcat1.bat # 这个bat文件实现的功能:设置环境变量 ...
- 在Ubuntu 主机上使用 Cockpit 管理容器
如果你管理着一台 Linux 服务器,那么你可能正在寻找一个可靠的管理工具.为了这个你可能已经看了 Webmin 和 cPanel 这类软件.但是,如果你正在寻找一种简单的方法来管理还包括了 Dock ...
- Linux常用基础指令
Linux常用指令 一.基础命令 whoami查看当前用户 pwd查看当前所在位置 ls 查看当前文件夹的内容 ls -l或ll显示详细内容 cd 绝对路径:从根目录开始的路径 cd / 文件夹 返回 ...
- 银河麒麟安装node,mysql,forever环境
这就是国产银河系统的界面,测试版本是麒麟V10 链接: https://pan.baidu.com/s/1_-ICBkgSZPKvmcdy1nVxVg 提取码: xhep 一.传输文件 cd /hom ...
- 我的 Kafka 旅程 - 文件存储机制
存储机制 Topic在每个Broker下存储所属的Partition,Partition下由 Index.Log 两类文件组成. 写入 Log 由多个Segment文件组成,每个Segment文件容量 ...
- 洛谷P1714 切蛋糕(单调队列)
先放代码...... 1 #include<bits/stdc++.h> 2 using namespace std; 3 const int N=5e5+10,M=0x3f3f3f3f; ...
- spring boot使用swagger生成api接口文档
前言 在之前的文章中,使用mybatis-plus生成了对应的包,在此基础上,我们针对项目的api接口,添加swagger配置和注解,生成swagger接口文档 具体可以查看本站spring boot ...
- 2022年整理最详细的java面试题、掌握这一套八股文、面试基础不成问题[吐血整理、纯手撸]
这里是参考B站上的大佬做的面试题笔记.大家也可以去看视频讲解!!! 文章目录 1.面向对象 2.JDK.JRE.JVM区别和联系 3.==和equals 4.final 5.String .Strin ...