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

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

Vue 3.3

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

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^[3] 在做这个事。
• 提高 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^[4]提案，可能会极大简化 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 阶段草案，详细了解看这里^[5]

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 的可用版本。

参考资料