Vue3现状报告及未来规划

佛系码 等级 781 0 0
标签: httpspng

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现状报告及未来规划

感谢大家!

收藏
评论区

相关推荐

Vue3 的 15 个常用 API
来自公众号:前端印象 本文会频繁地对比Vue2来介绍Vue3,也将对各个API结合代码实例讲解,这既是对自己知识的总结,也希望能帮助到大家 一、前言 大家都知道,现在Vue3的各个版本已经陆续发布了,并且有很多的团队已经着手各个库的开发与Vue2向Vue3的升级,我们当然也不能落后,所以赶紧将你手中的Vue2升级到Vue3,跟着本文一起学
浅谈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已经稳定。生态慢慢
「快速学习系列」我熬夜整理了Vue3.x响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性API reactive作用: 创建一个响应式数据。本质: 传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
「快速学习系列」我熬夜整理了Vue3.x响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性API reactive作用: 创建一个响应式数据。本质: 传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
Vue3 - 响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性API reactive作用: 创建一个响应式数据。本质: 传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
你可能会用到的JS工具函数(第二期)
Vue3在script标签中引入 const oDiv document.createElement('div'); const oScript document.createElement('script'); oDiv.setAttribute('id', 'app'); oScript.type 'text/java
Vue3 + TypeScript 开发实践总结
前言迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍。<br/在去年年末又把 TypeScript 重新学了一遍,为了上 Vue3 的车,更好的开车。<br/在上家公司4月份时,上级领导分配了一个内部的 党务系统开发 ,这个系统前端是由我一个人来开发,功能和需求也不怎么复杂的一个B 端 系统,直接上的 Vue3 + TypeScript + El
IE6下显示透明PNG及PNG8白边之解决
IE6下显示透明PNG及PNG8白边之解决 2011年05月16日 星期一 17:27 **1、首先我们在PS中准备好范例中需要的图片素材** ![](http://hiphotos.baidu.com/%B4%F3%CE%B0/pic/item/2f7403e98ffa0d64b90e2ddf.jpg) **2、我们看看在IE6下改图是怎么呈现的*
JPG、PNG和GIF图片的基本原理及优…
JPG、PNG和GIF图片的基本原理及优化方法 ======================= 一提到图片,我们就不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时,可以看见赖以构成整个图像的无数单个方块。 我们常见的图
HTTPS实现及自动续期
HTTPS实现及自动续期 ============ 安装certbot ========= 进行安装目录,如:/data1/server (根据实际情况输入) git clone [https://github.com/certbot/certbot](https://www.oschina.net/action/GoToLink?url=https
HTTPS过程以及详细案例
1.HTTPS的过程 ----------   ![](https://oscimg.oschina.net/oscnet/b2e07d6bd4c457eec34989a853bf2162d2b.png) **1.客户端向服务端发送请求,客户端主要向服务器提供以下信息:** *  支持的协议版本,比如TLS 1.0版。 * 一个客户端生成的随机
Taro 支持使用 Vue3 开发小程序
![](https://oscimg.oschina.net/oscnet/c2082f6e-88a3-4968-bf7f-3086ca8dc4ca.jpg) 前言— --- 9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,"One Piece" 的代号也昭示了其开拓伟大航路的野心。 Vue3 的新特性主要有 C
Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(功能拓展)
通过[环境搭建](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.grapecity.com.cn%2Fblogs%2Fspreadjs-vue3-component-development-combat-part1)和[组件集成](https://www.oschina.net/a
svg转png
svg转png网络上常用的方式有两种: 1.直接转base64放到图片src进行显示,测试效果不佳,始终报方法问题。 2.先转canvas,再转为png图,测试效果可以但svg透明背景到了canvas转换会变黑。 推荐使用方法三: 复制链接下载svg转png的js http://p8sv0x8g6.bkt.clouddn.com/saveSvgAs

热门文章

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

最新文章

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