前两天 Vue Mastery 刚刚发布了 Vue Conf 2023 US 的视频,虽然这个大会已经过去一段时间了,但是还是有非常多的内容值得去总结。
这个国内已经有很多媒体总结过了,这里我就不再赘述,放一张尤雨溪的Announcing Vue 3.3的目录截图,大概内容一目了然。
VitePress 1.0 beta 已经发布,很快就正式发布 1.0。
VitePress 是 VuePress 的继任者,更轻更快性能更强,而且更性感(默认主题),它是一个静态站点生成器,丢进你的 md 文件,就可以自动生成一个漂亮的静态站点。
目前 Vue 官网、Vite 官网、Rollup 官网等等都是基于 VitePress 构建,非常好用。
尤雨溪提到他们团队为 VitePress 感到自豪。
接下来是 Vue 3.x minors 版本接下来的计划。
第三、四季度,主要是做 Vapor Mode。
Vapor Mode 是一种类似 Svelte 的编译手段,减少运行时的开销,参考如下截图:
Vapor Mode 的现状和计划。
目前第一阶段完成了 v-for、v-if 等指令的原型试验,基于 benchmark 验证得出的初步结论来看,尤雨溪觉得 Vapor Mode 非常有前景,内存效率更高,性能显著提高。
Stage1 阶段的计划:
为了保证用户依然可以享受到 JSX 的灵活性,第二阶段的目标是把 JSX 和 Tempalte AST 都编译成一种相同的中间语言,再通过中间语言编译成 Vapor Mode Code
第三阶段是集成,尤雨溪提到为了保证用户可以无痛接入 Vapor Mode,甚至可以只在一部分组件里用 Vapor Mode,渐进式的享受新特性,所以集成这一步是必不可少的。
第三点是为了一种特殊场景: 用户完全使用 Vapor Mode,但是想接入比如 Vuetify 这样的依赖虚拟 DOM 运行时的组件,所以也需要支持 Vapor 下运行带有虚拟 DOM 的组件。
第四阶段,由于前期 Vapor Mode 只会支持一些核心指令和组件,所以在前面的内容都整理完成以后,才会去支持一些特殊组件。
尤雨溪提到一些新的平台特性,可能会让 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 是 EC39 的 Stage-2 阶段草案,详细了解看这里
Vue 在运行生命周期的过程是同步的,它会在全局保留一个 currentInstance 实例,而这个全局变量在 await 过后肯定会丢失了(离开了同步阶段)。为此 Vue 在内部做了很多黑魔法来保留上下文。
而 AsyncContext 则允许在运行异步任务的时候,能完全保留之前同步任务时的上下文,不需要黑魔法加持,currentInstance 实例也不会再丢失了。又省去了很多的内部工作。
而且这个语法让 Vue DevTool 里对于异步操作的一些跟踪也变得更方便了,可以知道异步任务什么时候完成,什么时候改变了 State,这些都可以可视化的展示在 DevTool 里了。
最后是谷歌最近一直在研究的一个早期提案:DOM Parts。
简单来说,就是 HTML 中的一种特殊语法,充当一个占位符。当你实例化这个 HTML 片段的时候,可以通过一个名为 getParts 的 API 来得到这些占位符的 references,而不需要通过遍历 DOM 树来获得。
这对于 Vapor Mode 想要生成的代码来说非常完美,Vapor 想要做的事情其实就是实例化一大块的 DOM 然后获得需要进行数据绑定的动态节点,再进行数据绑定。这个提案落地的话,就可以让 Vapor Mode 内部的代码更加紧凑、高效。
最后,尤雨溪给出了一个预期,在年底前给出 Vapor Mode 的可用版本。