Vue3现状报告及未来规划

佛系码 等级 440 0 0

Vue3现状报告及未来规划

近况

Vue3现状报告及未来规划

158 万周活跃用户(通过 devtools 插件来统计),940 万的月下载量。

对比去年

Vue3现状报告及未来规划

Devtools:110 万 -> 158 万(+43.6%) NPM:620 万 -> 940 万(+51.6%)

Vue 3.0 One Piece

Vue3现状报告及未来规划

Vue3现状报告及未来规划

自那之后,Vue3 逐渐趋于稳定,继续探索用户体验。

Vue Router 4.0

Vue3现状报告及未来规划

已经稳定。

Vuex 4.0

Vue3现状报告及未来规划

已经稳定。

生态

Vue3现状报告及未来规划

慢慢赶上了!

  • Nuxt 3

  • Vuetify

  • Quasar

  • Element Plus

  • Ant Design Vue

用户体验

Vue3现状报告及未来规划

持续探索中:

  • 新的构建工具

  • 更棒的语法

  • IDE/TS 支持

构建工具

Vue3现状报告及未来规划

Vite,不用说了,今年的明星项目。

  • 和 Vue-CLI 更加相似的体验

  • 基于 ESM 的 HMR 热更新

  • ESBuild 提供依赖预构建

  • Rollup 兼容的插件接口

  • 内置 SSR 支持

  • 更多更多……

可以扩展阅读笔者之前写的浅谈 Vite 2.0 原理,依赖预编译,插件机制是如何兼容 Rollup 的?[1]

Vue3现状报告及未来规划

Vite 还是 Vue-CLI?

  • 短期内会共存

  • 长期会融合:Vite 的速度 + Vue-CLI 的全面度支持

测试

Vue3现状报告及未来规划

  • Cypress 新版组件测试

  • @web/test-runner

  • Jest 集成进行中

看了下 @web/test-runner 的简介,非常全面的测试解决方案:

Vue3现状报告及未来规划

VitePress

Vue3现状报告及未来规划

基于 Vue3 + Vite 的静态站点生成器。

Vue3现状报告及未来规划

它的独特之处在于:

  • 利用 SPA 的开发体验来定制用户主题

  • 在 Markdown 里自由加入动态组件

  • 自动消除静态内容的“双重负载”

Vue3现状报告及未来规划

利用 VitePress 这个平台,探索未来 SSR/SSG 优化(Eat Your Own Dog Food)

  • 更积极的消除静态内容(甚至是主题组件)

  • 更高效的构建

  • 按需构建 + 边缘缓存

新的开发体验

Vue3现状报告及未来规划

利用编译器做更多事情:

  • script setup

  • style CSS 变量注入

script setup

Vue3现状报告及未来规划

Vue3现状报告及未来规划

  • RFC 地址[2]

  • 在单文件组建中提供更符合用户体验的 Composition API

  • 提高运行时性能

style 变量注入

Vue3现状报告及未来规划

  • RFC 地址[3]

  • 利用 v-bind() 在单文件组件的 style 中注入 JS 状态驱动的 CSS 变量

  • CSS-in-JS 的好处尽享,但避免了它的心智负担。

更好的 IDE/TS 支持

Vue3现状报告及未来规划

多个探索中的项目

  • Vetur

  • VueDX

  • Volar

获得了:

  • 类型检查,语法提示和 SFC templates 的自动重构

接下来:

  • 把这些努力整合成更推荐的链路

  • 提供 CLI 工具来利用 TS 校验 SFC

Vue3现状报告及未来规划

计划:

  • 基于 Volar 的新的官方 VSCode 插件,从 Vetur 和 VueDX 上汲取很多灵感。

  • 通过内部设计来支持其他编辑器,通过 LSP(Language Service Protocol)

未来

Vue3现状报告及未来规划

我们在 Vue3 中放弃了 IE11。

  • RFC[4]

  • 讨论[5]

笔者对这个 RFC 也进行了翻译:

Vue3 考虑彻底放弃 IE 浏览器

Vue3现状报告及未来规划

Vue 2.7 会成为坚持留守 IE11 人群的选择,它会提供更多的 Vue3 特性和 TS 支持。(估计在 2021 第三季度)

Vue3现状报告及未来规划

Vue3 的集成构建也要来了!

  • 估计在四月末

  • 可单独配置来兼容 v2

Vue3现状报告及未来规划

Vue3现状报告及未来规划

Vue3 会在 2021 二季度末尾,变成新的默认版本!

  • npm 的 lastest tag 会默认安装 Vue3

  • vuejs.org 官网会指向 Vue3 的文档

Vue3现状报告及未来规划

感谢大家!

收藏
评论区

相关推荐

Gradle系列之三 Gradle概述以及生命周期
1 Gradle是一种编程框架 gradle主要由以下三部分组成 1 groovy核心语法 2 build script block 3 gradle api 注:本章所有的代码都在 https://github.com/jiulu313/gradledemo.git 如下图 73485499237410.png(https://img
深入理解 Go Slice
(https://imghelloworld.osscnbeijing.aliyuncs.com/0ce8a8773a658d4b843e5796a0dbf001.png) image 原文地址:深入理解 Go Slice(https://github.com/EDDYCJY/blog/blob/master/golang/pkg/20
大佬说:“不想加班你就背会这 10 条 JS 技巧”
(https://imghelloworld.osscnbeijing.aliyuncs.com/83909ede68f61936ac3ae10c9ce8b223.png) 为了让自己写的代码更优雅且高效,特意向大佬请教了这 10 条 JS 技巧 1\. 数组分割 const listChunk (list
Android Service 流程分析
启动Service过程 Android Service启动时序图 (https://imghelloworld.osscnbeijing.aliyuncs.com/039313fdaaf1e7dea3bde222b3ec9934.png) Android Service启动时序图.png 上图就是Android
Python的map()方法如何使用?
在学习map()方法之前,我们先在交互模式下看下map()的用法说明。 (https://imghelloworld.osscnbeijing.aliyuncs.com/5c398969745b516276e1f7f5c7dcb764.png) 从上面可以得到的信息是: map()返回的是一个map对象(python2.0中返回的是列表
JavaScript中本地存储的方式有哪些?
(https://imghelloworld.osscnbeijing.aliyuncs.com/1f907f0895e2be23aa56604dd42e3626.png) 一、方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage loc
原来Python绘图也可以这么漂亮,这次真的是学习到了!
(https://imghelloworld.osscnbeijing.aliyuncs.com/8830803f033eeed85783e9058cf08968.png) 作者:朱小五 来源:快学Python 👆人生苦短,快学Python! 最近看了一篇文章《一个牛逼的Python 可视化库:PyG2Plot》,可惜只是简单介
Pandas案例精进 | 结构化数据非等值范围查找 ②
(https://imghelloworld.osscnbeijing.aliyuncs.com/4971fbce1ecb759123ecc666f3af2c31.png) 大家好,我是小五🐶 欢迎来到「Pandas案例精进」专栏(https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU5Nzg
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
SQL 诞生 48年了!为什么我们仍在使用它?
(https://imghelloworld.osscnbeijing.aliyuncs.com/a784e838a6d497b87a19798716e69fe8.png) 为什么我们仍在使用 SQL? SQL 和关系数据库管理系统(RDBMS)都是在 上世纪70 年代早期开发的。Edgar F. Codd 开发了 RDBMS,而 Do
被“词云”包围的冰冰会更好看吗?安排
(https://imghelloworld.osscnbeijing.aliyuncs.com/b299933deefc692934e8cc6141ab3894.png) 大家好,我是小五🐶 昨天「凹凸数据」发了一篇张同学投稿的文章《用Python爬取王冰冰vlog弹幕并制作词云(https://mp.weixin.qq.com/
用Python爬取王冰冰vlog弹幕并制作词云
(https://imghelloworld.osscnbeijing.aliyuncs.com/ee5c5cff038a2528350dc352e599b4c4.png) 大家好,我是张同学,最近的“瓜”,多到我们措手不及,可谓是“热点不断”。作为程序员,我们还可能随时为此而加班。 各种评论视频“爆炸”网络,打开首页全是热点话题的内容,某
浅谈Vue3新特性
Vue3的已发布一段时间了,新的Vue3在语法以及底层都进行了全新的重构,带来了更快的运行速度,更小的构建包,更友好的编程规范,让我们来看看有哪些变化吧。更快传统的虚拟dom算法:组件patch的时候,需要重新创建整个vdom树,然后遍历整棵树进行diff,update...更快的虚拟dom算法,源自编译模板时给予更多的运行时提示:1. 编译模板时对动
Vue3现状报告及未来规划
近况158 万周活跃用户(通过 devtools 插件来统计),940 万的月下载量。对比去年Devtools:110 万 158 万(+43.6%) NPM:620 万 940 万(+51.6%)Vue 3.0 One Piece自那之后,Vue3 逐渐趋于稳定,继续探索用户体验。Vue Router 4.0已经稳定。Vuex 4.0已经稳定。生态慢慢
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti

热门文章

Redis实现分布式锁Webpack 热更新以及原理日常必备的JS工具函数大全

最新文章

Webpack 热更新以及原理日常必备的JS工具函数大全Redis实现分布式锁