Vue Conf 2023 精彩回顾，新语法草案助 Vue 继续封神

首发于公众号 前端从进阶到入院，欢迎关注。

前两天 Vue Mastery 刚刚发布了 Vue Conf 2023 US 的视频，虽然这个大会已经过去一段时间了，但是还是有非常多的内容值得去总结。

• Vue 3.3 发布，新特性集合。
• Vite Press 1.0 Beta 发布。
• Vue 3.x 计划
• Vapor Mode
• 一些新的平台特性对 Vue 的帮助

Vue 3.3

这个国内已经有很多媒体总结过了，这里我就不再赘述，放一张尤雨溪的Announcing Vue 3.3的目录截图，大概内容一目了然。

Vite Press

VitePress 1.0 beta 已经发布，很快就正式发布 1.0。

VitePress 是 VuePress 的继任者，更轻更快性能更强，而且更性感（默认主题），它是一个静态站点生成器，丢进你的 md 文件，就可以自动生成一个漂亮的静态站点。

目前 Vue 官网、Vite 官网、Rollup 官网等等都是基于 VitePress 构建，非常好用。

尤雨溪提到他们团队为 VitePress 感到自豪。

Vue 3.x minors 计划

接下来是 Vue 3.x minors 版本接下来的计划。

• 稳定 Suspense 组件
• 把 Teleport 组件移到 core 部分里去，这样即使你传送的目标元素还没有 mounted，也可以正常运行。Guillane 在做这个事。
• 提高 computed 属性的计算效率，减少不必要的重新计算。
• SSR 的渲染改进
  • Lazy Hydration（这个应该和Google IO 19 年提到过的渐进式注水类似）
  • Nuxt 中一些 HTML 标签奇怪的行为会导致服务端和客户端的 HTML 不匹配，Vue 团队打算做一些校验并且在控制台给出警告。

Vapor Mode

第三、四季度，主要是做 Vapor Mode。

Vapor Mode 是一种类似 Svelte 的编译手段，减少运行时的开销，参考如下截图：

Vapor Mode 的现状和计划。

目前第一阶段完成了 v-for、v-if 等指令的原型试验，基于 benchmark 验证得出的初步结论来看，尤雨溪觉得 Vapor Mode 非常有前景，内存效率更高，性能显著提高。

Stage1 阶段的计划：

1. 支持核心指令 & 组件树
2. 验证性能假设
3. 与当前 SSR 产物注水的兼容性 第一阶段基本上完成了。

为了保证用户依然可以享受到 JSX 的灵活性，第二阶段的目标是把 JSX 和 Tempalte AST 都编译成一种相同的中间语言，再通过中间语言编译成 Vapor Mode Code

第三阶段是集成，尤雨溪提到为了保证用户可以无痛接入 Vapor Mode，甚至可以只在一部分组件里用 Vapor Mode，渐进式的享受新特性，所以集成这一步是必不可少的。

第三点是为了一种特殊场景： 用户完全使用 Vapor Mode，但是想接入比如 Vuetify 这样的依赖虚拟 DOM 运行时的组件，所以也需要支持 Vapor 下运行带有虚拟 DOM 的组件。

第四阶段，由于前期 Vapor Mode 只会支持一些核心指令和组件，所以在前面的内容都整理完成以后，才会去支持一些特殊组件。

新特性对 Vue 预期的收益

@scope CSS 草案

尤雨溪提到一些新的平台特性，可能会让 Vue 从中受益。

目前 W3C 的CSS Cascading and Inheritance Level 6提案，可能会极大简化 Vue 单文件组件里 scope CSS 用法。

这是目前的 Vue Scoped Style 写法，Vue 在底层实现里会把你在标签上书写的 attribute 遍历加入到组件的 DOM 元素中，再用 postCSS 把每一个特殊写法的 CSS Rule 转换后加入到用户写的选择器中，这样才能确保样式规则匹配到特定的元素。

目前的实现太复杂了，但是新的 Native @scope 规则的出现改变了玩法。

新规则下，Vue 内部只需要在每个组件的根部元素上加上 scope 属性即可。（再也不需要一个一个元素遍历去加了）

我看了一下草案，这感觉真是和 Vue 携手同心啊 😆😆

这个改动落地后，首先 HTML 的大小就会有所缩减，而在 CSS 中，只需要把 CSS 包裹在 @scope 块中即可，再也不用一条一条规则的转换、插入了，又是一大波性能收益。

这就相当于 W3C 的新 CSS 草案天然的支持组件的 CSS 作用域了。

AsyncContext 语法

AsyncContext 是 EC39 的 Stage-2 阶段草案，详细了解看这里

Vue 在运行生命周期的过程是同步的，它会在全局保留一个 currentInstance 实例，而这个全局变量在 await 过后肯定会丢失了（离开了同步阶段）。为此 Vue 在内部做了很多黑魔法来保留上下文。

而 AsyncContext 则允许在运行异步任务的时候，能完全保留之前同步任务时的上下文，不需要黑魔法加持，currentInstance 实例也不会再丢失了。又省去了很多的内部工作。

而且这个语法让 Vue DevTool 里对于异步操作的一些跟踪也变得更方便了，可以知道异步任务什么时候完成，什么时候改变了 State，这些都可以可视化的展示在 DevTool 里了。

DOM Parts 提案

最后是谷歌最近一直在研究的一个早期提案：DOM Parts。

简单来说，就是 HTML 中的一种特殊语法，充当一个占位符。当你实例化这个 HTML 片段的时候，可以通过一个名为 getParts 的 API 来得到这些占位符的 references，而不需要通过遍历 DOM 树来获得。

这对于 Vapor Mode 想要生成的代码来说非常完美，Vapor 想要做的事情其实就是实例化一大块的 DOM 然后获得需要进行数据绑定的动态节点，再进行数据绑定。这个提案落地的话，就可以让 Vapor Mode 内部的代码更加紧凑、高效。

结束

最后，尤雨溪给出了一个预期，在年底前给出 Vapor Mode 的可用版本。

首发于公众号 前端从进阶到入院，分享 Vue 源码 / React / TS / 浏览器 / 工程化以及海量的面经，面试题解，我的文章帮助了很多小伙伴进入大厂，欢迎关注。