Vue 3.0 现状报告，未来规划

r囧r小猫 2023-01-13 10:10 157阅读 0赞

![屏幕截图.png][.png]

## 近况 ##

![屏幕截图.png][.png 1]

**158 万**周活跃用户（通过 devtools 插件来统计），**940 万**的月下载量。

## 对比去年 ##

![屏幕截图.png][.png 2]

Devtools：110 万 -> 158 万（+43.6%） NPM：620 万 -> 940 万（+51.6%）

## Vue 3.0 One Piece ##

![屏幕截图.png][.png 3] ![屏幕截图.png][.png 4]

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

## Vue Router 4.0 ##

![屏幕截图.png][.png 5]

已经稳定。

## Vuex 4.0 ##

![屏幕截图.png][.png 6]

已经稳定。

## 生态 ##

![屏幕截图.png][.png 7]

慢慢赶上了！

*  Nuxt 3
 *  Vuetify
 *  Quasar
 *  Element Plus
 *  Ant Design Vue

## 用户体验 ##

![屏幕截图.png][.png 8]

持续探索中：

*  新的构建工具
 *  更棒的语法
 *  IDE/TS 支持

## 构建工具 ##

![屏幕截图.png][.png 9]

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

*  和 Vue-CLI 更加相似的体验
 *  基于 ESM 的 HMR 热更新
 *  ESBuild 提供依赖预构建
 *  Rollup 兼容的插件接口
 *  内置 SSR 支持
 *  更多更多……

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

![屏幕截图.png][.png 10]

Vite 还是 Vue-CLI？

*  短期内会共存
 *  长期会融合：Vite 的速度 + Vue-CLI 的全面度支持

## 测试 ##

![屏幕截图.png][.png 11]

*  Cypress 新版组件测试
 *  @web/test-runner
 *  Jest 集成进行中

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

![屏幕截图.png][.png 12]

## VitePress ##

![屏幕截图.png][.png 13]

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

![屏幕截图.png][.png 14]

它的独特之处在于：

*  利用 SPA 的开发体验来定制用户主题
 *  在 Markdown 里自由加入动态组件
 *  自动消除静态内容的“双重负载”

![屏幕截图.png][.png 15]

利用 VitePress 这个平台，探索未来 SSR/SSG 优化（Eat Your Own Dog Food）

*  更积极的消除静态内容（甚至是主题组件）
 *  更高效的构建
 *  按需构建 + 边缘缓存

## 新的开发体验 ##

![屏幕截图.png][.png 16]

利用编译器做更多事情：

*  `script setup`
 *  `style` CSS 变量注入

### script setup ###

![屏幕截图.png][.png 17] ![屏幕截图.png][.png 18]

*  RFC 地址\[2\]
 *  在单文件组建中提供更符合用户体验的 Composition API
 *  提高运行时性能

### style 变量注入 ###

![屏幕截图.png][.png 19]

*  RFC 地址\[3\]
 *  利用 `v-bind()` 在单文件组件的 `style` 中注入 JS 状态驱动的 CSS 变量
 *  CSS-in-JS 的好处尽享，但避免了它的心智负担。

## 更好的 IDE/TS 支持 ##

![屏幕截图.png][.png 20]

多个探索中的项目

*  Vetur
 *  VueDX
 *  Volar

获得了：

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

接下来：

*  **把这些努力整合成更推荐的链路**
 *  提供 CLI 工具来利用 TS 校验 SFC

![屏幕截图.png][.png 21]

计划：

*  基于 Volar 的**新的官方 VSCode 插件**，从 Vetur 和 VueDX 上汲取很多灵感。
 *  通过内部设计来支持其他编辑器，通过 LSP（Language Service Protocol）

## 未来 ##

![屏幕截图.png][.png 22]

我们在 Vue3 中放弃了 IE11。

*  RFC\[4\]
 *  讨论\[5\]

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

[Vue3 考虑彻底放弃 IE 浏览器][Vue3 _ IE]

![屏幕截图.png][.png 23]

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

![屏幕截图.png][.png 24]

Vue3 的集成构建也要来了！

*  估计在**四月末**
 *  可单独配置来兼容 v2

![屏幕截图.png][.png 25] ![屏幕截图.png][.png 26]

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

*  npm 的 lastest tag 会默认安装 Vue3
 *  vuejs.org 官网会指向 Vue3 的文档

![屏幕截图.png][.png 27]

感谢大家！

### 参考资料 ###

\[1\]

浅谈 Vite 2.0 原理，依赖预编译，插件机制是如何兼容 Rollup 的？: *https://juejin.cn/post/6932367804108800007*

\[2\]

RFC 地址: *https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md*

\[3\]

RFC 地址: *https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md*

\[4\]

RFC: *https://github.com/vuejs/rfcs/blob/ie11/active-rfcs/0000-vue3-ie11-support.md*

\[5\]

讨论: *https://github.com/vuejs/rfcs/discussions/296*

点赞并分享给你的朋友是最好的支持~

[.png]: /images/20221022/aa004c7e41dc46fdb9b2a3dc9a10f37e.png
[.png 1]: /images/20221022/cf969fa6f95d4dce897af0d70da12a9a.png
[.png 2]: /images/20221022/a5ac4d640dd745b89559e218a174008b.png
[.png 3]: https://img-blog.csdnimg.cn/img_convert/1e6d024267853ec7282163b1afbce83b.png
[.png 4]: /images/20221022/baca815731a8471ab3dc6563d440c9f9.png
[.png 5]: /images/20221022/a349991b25714aa4a869ebd8ab43b943.png
[.png 6]: /images/20221022/51069fdd124045359a14764a1b9bfcbd.png
[.png 7]: /images/20221022/ec0b9ba76b334054b6c62d2bbebb8cc0.png
[.png 8]: /images/20221022/e76b19f694e0446fa9f090b3167686d3.png
[.png 9]: /images/20221022/25b997ea861c474fac13625541c0b804.png
[.png 10]: /images/20221022/fc9aabca6d014926a0341e94f041d6b6.png
[.png 11]: /images/20221022/2b5c163910f440cea134e32b25d076ed.png
[.png 12]: /images/20221022/9cfbdb498f514fac8dbca07d9a33cd49.png
[.png 13]: /images/20221022/2062a1eff06042f48748300dce739435.png
[.png 14]: /images/20221022/cc6fc7d5aea845faa260f84dde9fa3a1.png
[.png 15]: /images/20221022/193ed9fcdaf3425fa40585cc837ddf48.png
[.png 16]: /images/20221022/777d1bf5489d4b80b4aaa1f76530ee49.png
[.png 17]: https://img-blog.csdnimg.cn/img_convert/6ad0bf7459907a291e9294b49e8e672a.png
[.png 18]: /images/20221022/4e0442f6544049f08e2f69ee2d7730bb.png
[.png 19]: /images/20221022/5a0f24c8e91c46c99d074b829e3afba9.png
[.png 20]: /images/20221022/9eb288f4473a4e02b6d34dd2dcd4a14a.png
[.png 21]: /images/20221022/fb0c42fed84642edab73c0d69bffe3c7.png
[.png 22]: /images/20221022/b4d0d591e48a4397b95be4b1a480ecfa.png
[Vue3 _ IE]: https://mp.weixin.qq.com/s?__biz=MzI3NTM5NDgzOA%3D%3D&chksm=eb07d596dc705c80b9db1bf62b0cc614b4f4012087e994ad178d5d91cfc3b9ad16f5c5ae72f0&idx=1&lang=zh_CN&mid=2247495151&scene=21&sn=981920c2345fb3a70097b2a8dfa5ba66&token=1932513687#wechat_redirect
[.png 23]: /images/20221022/e7499f0615144bfa9145573c8ae0b184.png
[.png 24]: /images/20221022/9df764da7d0b41f0a0527c109db9da8b.png
[.png 25]: https://img-blog.csdnimg.cn/img_convert/5bd4f5b9379ab9b95e7032cf7ce6c2f7.png
[.png 26]: /images/20221022/1e2d6f0ab0dd431c950ed679c3522699.png
[.png 27]: /images/20221022/4fe30d1fee1c407da2be4bd98ad5ffa1.png