Vue.js 2021 年度报告出炉!

点击下方“前端开发博客”关注公众号

回复“2”加入前端群

本文经授权转自公众号CSDN(ID:CSDNnews)

整理 | 苏宓 

作为前端开发框架三剑客之一,Vue 自 2014 年发布以来,成为很多开发者必备的工具。

近日,国外软件开发机构 Monterail 在对 Vue 生态进行深度调研之后,重磅发布了《State of Vue.js 2021》报告。基于本报告,大家可以了解到 Vue 3 的最新功能、大厂及开发者使用 Vue 的实战经历、前端三大框架在不同领域的应用现状。

1、Vue 3 新特性

2018 年年底,Vue.js 作者尤雨溪表示,为了实现更清晰、更容易维护的源代码架构,决定重写 Vue 3。

时隔一年,万众期待的 Vue 3.0 “One Piece”于 2020 年 9 月正式发布了。新版本:

  • 更小。精简的库带来了一个轻量级的包,只有 15KB,比 2.6 版本小了 50%。通过 Tree shaking 可以减少输出文件大小,也可以从代码中移除未使用的功能。

  • 更快。很多框架都进行了全面的升级,包括重写了虚拟 DOM 等,都有效地提升了速度。

  • 通过 Composition API 将各个功能的代码组合在一起,允许用户像编写函数一样自由地表达、组合和重用有状态的组件逻辑,同时提供出色的 TypeScript 支持。这意味着代码更简洁、更易于阅读和共享。

  • Teleport 函数可以让用户编写的组件挂载到任何想要挂载的 DOM 上。当前,Teleport 函数已内置在 Vue 3 中。

对此,Monterail 评价道,“持续更新及改进的 Vue 在实践中证明了自己,对于未来的项目而言,它仍然是一种可靠的技术选择。同时,Vue 3 也和老版本保持了兼容性,这一点确保了它在已完成的项目中更新和添加功能的稳定性。”

2、Vue 正当时

在对前端框架进行了调查之后,Monterail 汇总了各个渠道的 Vue 框架受欢迎情况。其中,基于招聘平台 HackerRank,我们发现 Vue 最新排名位于第 8 位,不过,其流行度在逐年上升。

当谈及顶级网站都是使用哪种框架时,我们发现在排名前 100 万的网站中,Vue 位居第二,所占的比例比 Angular 还要多。同时,与 React 相比,Vue 虽然不及它的使用率,但是也占有相当大的份额。

另外,Stack Overflow 每年都会对其用户进行调查,询问他们最喜欢和最不喜欢的框架。尽管多年来,调查结果均有所差异,但是结果证明,Vue 流行度上升的趋势,Angular 有所下滑。

根据 Stack Overflow 的调查显示,Vue 更加适合初学者,且其全面的文档受到了开发者的喜爱。

过去一年中,JetBrains 也对前端框架进行了调研,而这是唯一一份显示 Vue 受欢迎程度正在下降的报告。不过,这其中原因可能与受访者背景有关。自 2017 年以来,受访者中的大多数在 51-500 人规模的公司全职工作,并以 2-7 人的团队工作,事实上,这些人常用 React 框架而并非是 Vue。

3、开发者如何使用 Vue?

通过线上收集问卷, Monterail 总计收到了 1635 份有效数据,其中主要来自专业的开发者和 CTO 对 Vue 的看法,并发现:

  • 90% 的受访者表示,他们在下一个项目中使用 Vue.js 的可能性很高。

  • 93% 的受访者通过使用官方文档来了解 Vue,而 76% 的受访者指出,出色的文档是该框架的最大优势。

  • 60% 的人决定将 Vue 加入其技术栈中,因为他们认为这是一个非常简单的框架。

  • 56% 的调查参与者认为,Vue.js 在未来 12 个月内将在其组织中变得更加流行。

除此之外,当提及对 Vue.js 有何建议时,63 位受访者表示,希望更好地实现对 TypeScript 的支持,也有不少开发者希望能够有更好的文档,以及真实的开发案例可供研究。

根据报告显示,在 2019 年时,仅有 11% 的受访者使用 Vue.js 已有两年以上。在今年,这一比例上升到了 42.1%,这也意味着在很多公司内部,Vue 正在不断地被采用。

官方文档是最受欢迎的学习资源,其次,也有不少开发者通过在线文章或博客、在线交流等方式来提升 Vue 的开发技能。

在 2020 年期间,78% 的受访者表示在开发 Vue 项目时,使用了 ES2015+ 版本。

85% 的开发者使用了 String 模板来编写 HTML。

在落地应用中,89% 的受访者使用过 Vue Router 技术。

据调查显示,53% 的用户在自己的上一个 Vue 项目中使用了 CLI3 工具。

97% 的开发者选择了 Vue.js 框架来开发自己的前端项目,其次,jQuery 也颇受欢迎。

在后端开发时,50% 的受访者表示会使用 Node.js 语言,42% 的人会选用 PHP,而 Java 排名第三位,占比 20%。

人口统计

这些受访者主要来自于美国,占比 16.2%,其次 7.6% 的开发者来自德国。

相较而言,使用 Vue 的企业规模不大,小于 100 人的团队占比 69.4%。团队内 2-10 人的占比 72.4%。

4、前端框架大 PK

除了以上,Monterail 还从性能、语法、应用等维度,分析了 Vue、React 和 Angular 的优势与缺点,也希望能够帮助开发者们各取所需,找到适合自己的技术。

根据 GitHub 数据显示,作为开源框架的 React 目前获得了 161k 个 GitHub stars。整体而言,React 是目前使用最广泛的框架,其发展趋势和 Vue 一样,用户量随着时间的推移在不断增长。

相比前浪,Vue 的流行度也更高,对于 Vue 开发者而言,经常逛的社区包括 Vue 论坛、Discord 和 Reddit。

Angular 的交流主要集中在 Slack、Gitter、Stack Overflow、Reddit。

性能

围绕 Vue 不同的版本、Angular、React,Stefan Krause 平台基于相同的环境,进行了评测。

可扩展性

Vue

作为一种渐进式框架,Vue 可适用于多种环境。一方面,可以将其添加到现有的多页面应用程序中以使其更具交互性,同时,得益于最新的服务器端渲染功能,它也可以用于构建大型单页应用程序甚至通用 App。

React

React 可以构建多页应用程序和单页应用程序。

与 Vue 相比,React 的 CLI 稍差一些。开发者常常只能使用单页应用程序模板,并且不能从用户构建的预设生成项目。

除此之外,React 对于构建可扩展的 Web 应用程序非常有用。

Angular

相比专为创建交互式 Web 应用而生的 Vue、React 框架,Angular 的主要优势就是可扩展性,它可以使用功能模块进一步优化其基于组件的结构。但是在构建大型应用程序时,会比较耗时。此外,Angular 中的依赖项注入使开发者可以设计易于扩展或重构其功能的应用程序。话虽这么说,但 Angular 组件的体系结构必须经过仔细计划和深思熟虑。

对于某些项目,这有时可能会产生太大的开销。

移动开发

Vue

当使用 Vue 开发跨平台移动应用程序时,开发者有两种方法,一种是当下最流行的是方式——NativeScript-Vue;另一种是 Ionic Vue。

其中,NativeScript-Vue 是一个 NativeScript 插件,允许开发者使用 Vue.js 语法。而选择 NativeScript 的主要原因是:

  • 访问整个 Native API——你始终可以从 JavaScript 访问本地对象或 API,如果要自定义任何内容,只需要在项目中的插件上编写替代项即可;

  • 可以方便代码共享

  • 支持 Angular、TypeScript

React

当使用 React 开发移动应用程序时,众所周知,React Native 是必备的一个技能。该框架可以帮助开发者实现“学习一次,编写任何东西”的愿景,这意味着使用它可以编写跨平台的 Android 和 iOS App。

与 Ionic 等其他跨平台框架有所不同,作为 React 的开发商 Facebook 一直强调,不同的平台存在一定的差异,而 React Native 也认可这一点。因为,在使用 React Native 时,也可以为 iOS 和 Android 应用开发特定的模块,如状态栏、导航等等。

另外开发者如果想要在 Web 上运行跨平台应用程序,也可以使用如 React Native for Web 或 ReactXP 之类的库来实现,而无需重新编写。

Angular

据调查显示,使用 Angular 开发移动应用程序时,最常使用的是 NativeScript。从表面上看,该框架具有跨平台项目所需要的一切,但实际上,开发者认为,当你遇到:

  • 开发具有 Android 和 iOS 通用功能的简单应用

  • 在不了解 Objective C 或 Java 时,需要自定义本地的 UI 组件

  • 需要使用 NativeScript 的框架来开发应用程序上的 Web 部件

等情况时,NativeScript + Angular 才是最佳选择。

最佳实践

无论是 Vue,还是 React、Angular、Svelte 框架,都有自身的优势,但在不同的场景之下,也有一定的缺点。

那么在什么样的场景下适合用什么样的框架?本次报告中,也进行了简单的总结,如果你想快速获得一个工作的解决方案、构建一个轻量级 App、将当前的项目逐渐应用上现代框架、以及边学边实践的话,不妨试试 Vue。

如果你想构建一个复杂的方案、不断地扩大应用程序规模、得到最常用的移动开发框架的支持,React 或许是个不错的选择。

当你想要构建出一个遵循你最初选择的体系结构的高可扩展性的应用程序,且由多个人共同参与的大型项目,可以试试使用 Angular 框架。

如果想要构建超轻量级的 Web 或移动应用程序,也可以尝试使用新的 Svelte。

最后,你用过 Vue 吗?对于发布不久的 Vue 3,你又有什么样的使用心得?欢迎留言分享你的看法。

更多报告内容可参考:https://www.monterail.com/state-of-vue-2021-report

本文转自公众号“CSDN”,ID:CSDNnews

❤️ 看完两件事

如果你觉得这篇内容对你挺有启发,我想邀请你帮我两个小忙:

  1. 点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)

  2. 关注公众号「前端开发博客」,每周重点攻克一个前端面试重难点,

  3. 公众号后台回复「电子书」即可免费获取 27本 精选的前端电子书!

点个在看支持我吧,转发就更好了

前端开发博客
关注 关注
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue.js!!!!!!!!
06-14
vue2的源代码!!!!!!
vue官方API开发文档
03-04
vue官方开发使用文档,chm格式,方便易用。官方API开发文档学习笔记。
都在夸官方文档 Vue.js 2021 年度报告出炉
CSDN资讯
03-30 3880
整理 | 苏宓出品 | CSDN(ID:CSDNnews)作为前端开发框架三剑客之一,Vue 自 2014 年发布以来,成为很多开发者必备的工具。近日,国外软件开发机构 Monterai...
官方文档Vue
A123ppleQueen的博客
07-19 2181
组件的复用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit.
Vue3.0官方文档
热门推荐
weixin_45936275的博客
09-22 2万+
Vue3.0 中文文档地址 https://v3.cn.vuejs.org/
vue.js官方中文文档
sen_03的博客
11-02 1万+
vue.js官方中文文档https://vuejs.bootcss.com/guide/ vue.js官方文档https://cn.vuejs.org/v2/guide/
vue.global.jsVue.js 框架的核心文件之一
最新发布
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用,它提供了全局范围的 Vue 构造函数和一些全局...
最细致的vue.js基础语法 值得收藏!
12-29
前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
vue.jsvue.min.js
06-13
vue.jsvue.min.js
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容:vue.jsvue.min.jsvue.common.jsvue.common.dev.jsvue.common.prod.jsvue.esm.browser.jsvue.esm.browser.min.jsvue.runtime.jsvue.runtime.min.jsvue.runtime.esm.jsvue.runtime.common....
Vue 核心技术总结
12-12
Vue 核心技术总结,适合初步想了解Vue语法的童鞋,其实语法是相通的。加油吧
Vue学习笔记2-安装Vue
摘繁华
06-12 1277
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
VUE.js中文官方文档
极客云曦前端
06-09 8393
目录创建一个 Vue 应用#应用实例#根组件#挂载应用#DOM 中的根组件模板#应用配置#多个应用实例#模板语法#文本插值#原始 HTML#Attribute 绑定#简写#布尔型 Attribute#动态绑定多个值#使用 JavaScript 表达式#仅支持表达式#调用函数#受限的全局访问#指令 Directives#参数 Arguments#动态参数#修饰符 Modifiers#响应式基础#声明响应式状态#响应式代理 vs. 原始值#声明方法#DOM 更新时机#深层响应性#有状态方法#计算属性#基础示例#
Vue官方文档学习
Anna_Liqi的博客
03-22 3333
一、vue介绍 声明式渲染, 可以通过简单的模板语法来声明式地将数据渲染 第一个vue应用: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scr
Vue技术总结
weixin_45411959的博客
11-23 465
Vue技术总结 事件对象$event $event 常见用法: # 启用一个事件 <div @click="clickme($event)">click me</div> # 在方法中接收事件对象 clickme(e){ console.log(e); } 键盘事件 @keydown.enter 应用场景 输完密码回车提交表单 过滤器 超过长度为5的截断 定义(尽量都定义成为全局的) Vue.filter(“cut”,function(str){ return str.
vue2.0官方文档学习(介绍、Vue实例、模板语法、计算属性和监听器)
叶子树的博客
11-14 1万+
安装 vue安装方式 // 使用script直接引入 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> // 使用npm安装 npm install vue vue3.0创建项目 vue create hello-world vue2.0创建一个项目 npm install -g @vue/cli-init // `vue init` 的运行效果将会跟 `vue-cli
Vue.js 3.0官方文档
在那山的那边海的那边,有一群程序猿
07-31 7432
随着Vue3.0 RC版本的发布,官方也给随之发布了测试版的文档《Vue.js 3.0官方文档(测试版)》。虽然文档还没有更新完,但是这个时候可以先看一波迁移指南。 另外更多消息可以关注news.vuejs.org官方博客 ...
vue官方文档学习
u012335618的专栏
12-06 845
概述 vue是用于构建用户界面的渐进式框架,自底而上的应用,是一套用户救恩面的框架 声明式渲染 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 通过简洁的模板语法来让数据渲染至dom,数据和d...
学习:Vue.js官方文档----介绍、Vue实例、模板语法、计算属性与侦听器
long_steve的博客
09-21 814
v-bind 绑定属性(attribute)v-on 绑定事件(添加事件监听器)调用方法除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀$,以便与用户定义的 property(属性) 区分开来。// vm.$data、vm.$el、vm.$watch 都是自带的 var data = {
vue.jsvue.min.js下载
06-07
Vue.js是一款流行的JavaScript框架,它提供了强大的数据绑定和组件化功能,使得前端开发更加高效和便捷。Vue.js框架的官网(https://cn.vuejs.org/)上提供了两个版本的下载,分别是vue.jsvue.min.jsvue.js是开发环境使用的版本,它包含了完整的Vue框架代码和注释,文件大小比较大,可读性比较好,适合进行开发调试和学习使用。 vue.min.js是生产环境使用的版本,它经过了压缩和优化处理,文件大小更小,可直接用于生产环境,提高了页面加载速度和性能。一般来说,我们在开发过程中使用vue.js,在上线前使用vue.min.js进行打包压缩优化,然后部署到网站上。 总之,vue.jsvue.min.js都是Vue.js框架的核心代码,选择哪个版本取决于你的需求和用途。对于初学者来说,建议先使用vue.js进行学习和开发,熟悉了框架的使用后再选择vue.min.js进行生产环境部署和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 字符串转换为数组的4 个方法 347295
  • 前端程序员简历模板整理和下载 73628
  • 8张JS 基础思维图,超详细! 52389
  • 前端程序员简历制作建议 50558
  • Vue3.0七大亮点 49227

分类专栏

  • 前端开发 6篇
  • 编程日志 2篇

最新评论

  • 深入浅出 CSS 动画

    枫叶思念: 这种文章不点赞怎么能行!

  • 程序员必备!14款VSCode主题,让你的代码更精彩!

    EDEN_RT: 如何自己设计主题?

  • 前端刷题共读之01:请解释事件委托

    普通网友: 优质好文,细节很到位!【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • 50个前端实战项目之04:隐藏的搜索小组件

    2401_84434237: 每当我阅读你的编程博客文章时,我总能感受到你的专业水平和耐心解答的精神。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • 面试官:CSS 选择器的优先级是如何计算的?

    2401_84419493: 你的博客内容深入浅出,总是让我不再感到学习的困难,每一篇博文都是我学习的宝库。【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

大家在看

  • Python 开心消消乐 14353
  • 基于SpringBoot+Vue毕业设计管理系统设计和实现(源码+LW+部署讲解)
  • 达梦 dimp 相关的命令(数据库导入、导出) 356
  • Linux 远程联机服务(二)- Rsh服务器
  • C++的哈希 && 哈希表 && 哈希桶 2029

最新文章

  • 探索 Vue Devtools 4.0 的新世界!
  • Vue.js表单开发宝藏工具集,让构建表单变得轻松又酷炫!
  • 原来月薪30k的简历长这样,进来抄作业!
2024
06月 1篇
05月 46篇
04月 57篇
03月 32篇
02月 23篇
01月 20篇
2023年18篇
2022年155篇
2021年376篇
2020年288篇
2019年92篇
2018年19篇
2017年26篇
2016年6篇
2015年2篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

深圳SEO优化公司遂宁网络营销公司那曲SEO按效果付费多少钱黄南网站关键词优化多少钱喀什网页设计哪家好铜陵模板推广多少钱朔州SEO按天计费推荐丽水品牌网站设计公司广元网站搭建多少钱遵义设计网站价格广安网站优化公司木棉湾百姓网标王鸡西网站优化按天收费哪家好石家庄营销型网站建设公司哈尔滨企业网站建设报价亳州营销型网站建设多少钱柳州网站建设价格衡阳SEO按天计费价格吕梁建网站多少钱张家口企业网站改版哪家好阳江关键词按天扣费多少钱坑梓阿里店铺托管清徐设计公司网站哪家好九江网站改版推荐宜宾网站建设设计多少钱衡阳网站改版价格双龙网站排名优化报价荆州网站关键词优化公司郑州外贸网站建设多少钱张掖百度网站优化娄底关键词按天计费多少钱歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

深圳SEO优化公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化