Vue Conf 2023 精彩回顾，新语法草案助 Vue 继续封神
Category（分类）: Vue Status: 已核对
首发于公众号“前端从进阶到入院”，欢迎关注。
前两天 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 的现状和计划分为四个阶段：
Vapor Mode 是一种类似 Svelte 的编译手段，减少运行时的开销，参考如下截图：
这张 “in a Nutshell” 幻灯片概括的是新编译策略，并没有展示具体的性能或内存对比数据。
目前第一阶段完成了 v-for、v-if 等指令的原型试验，基于 benchmark 验证得出的初步结论来看，尤雨溪觉得 Vapor Mode 非常有前景，内存效率更高，性能显著提高。
Stage 1 阶段的计划：
- 支持核心指令 & 组件树
- 验证性能假设
- 与当前 SSR 产物注水的兼容性
第一阶段基本上完成了。
为了保证用户依然可以享受到 JSX 的灵活性，第二阶段的目标是把 JSX 和 Template AST 都编译成一种相同的中间语言，再通过中间语言编译成 Vapor Mode Code。
第三阶段是集成，尤雨溪提到为了保证用户可以无痛接入 Vapor Mode，甚至可以只在一部分组件里用 Vapor Mode，渐进式的享受新特性，所以集成这一步是必不可少的。
第三点是为了一种特殊场景：用户完全使用 Vapor Mode，但是想接入比如 Vuetify 这样的依赖虚拟 DOM 运行时的组件，所以也需要支持 Vapor 下运行带有虚拟 DOM 的组件。
第四阶段，由于前期 Vapor Mode 只会支持一些核心指令和组件，所以在前面的内容都整理完成以后，才会去支持 Transition、KeepAlive、Teleport、Suspense 等特殊组件。
新特性对 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 是 TC39 的 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 的可用版本。
截至 2026 回看：计划、实验与发布不能混为一谈
上文保留的是 2023 年演讲和原作者当时的叙述。会议路线图、RFC 或平台提案不等于已经进入稳定版；下面用官方发布记录补上时间线。
Vue 3.3、3.4、3.5 落地矩阵
| 能力 | 2023 / Vue 3.3 | Vue 3.4 | Vue 3.5 及当前结论 |
|---|---|---|---|
defineModel | 实验性，需显式启用 | 稳定，无需配置 | 当前仍是 3.4+ 正式宏；默认值可能造成父子初值不同步 |
Reactivity Transform（$ref、$()、$$()） | 已标记废弃 | 从 Vue core 移除 | 不再是 Vue 官方 core 语法；需要时只能评估外部 Vue Macros |
| 响应式 Props 解构 | 从大 Transform 拆出的独立实验 | 默认仍关闭 | 3.5 稳定并默认开启；跨函数边界仍应传 getter |
defineOptions | 3.3 正式可用 | 继续支持 | 当前仍支持；宏选项会提升，不能引用 setup 局部变量 |
| 泛型组件 | 3.3 正式落地 | 继续支持 | 当前仍是类型/工具链能力，不是运行时泛型 |
| computed 减少无效重算、hydration mismatch 提示 | 路线图 | 3.4 已改进 | 后续持续改进 |
SSR Lazy Hydration、data-allow-mismatch | 路线图 | 尚未完整落地 | 3.5 落地 |
| Teleport 延迟目标 | 路线图 | 尚未落地 | 3.5 增加 defer，只允许同一 mount/update tick 内稍后出现的目标 |
| Suspense 稳定化 | 计划 | 文档仍为实验性 | 当前文档仍标记 Experimental，不能写成已稳定 |
Reactivity Transform 的结局尤其容易误读：广义 $ref / $() / $$() 方案已经放弃，但从中拆出的“响应式 Props 解构”在 Vue 3.5 独立稳定。两者不是同一个状态。
<!-- Vue 3.4+：稳定的 defineModel 编译宏，无需从 vue 导入 -->
<script setup lang="ts">
const model = defineModel<string>()
</script>
<template>
<input v-model="model">
</template>
<!-- Vue 3.5+：Props 解构保持响应式；传给 watch 时仍传 getter -->
<script setup lang="ts">
import { watch } from 'vue'
const { count = 0 } = defineProps<{ count?: number }>()
watch(() => count, value => console.log(value))
</script>
VitePress、Vapor 与平台提案的后续状态
- VitePress：演讲时为 1.0 Beta，后来已经正式发布 1.0。原文的“很快正式发布”只保留为 2023 时间语境。
- Vapor Mode：原文的四阶段——核心运行时原型、共享 JSX/Template IR、渐进集成与 VDOM 互操作、功能对齐——是路线图。Vue 3.5 文档仍称其处于 early phase；Vue 3.6.0-rc.1 虽称 Vapor 已 feature-complete，但 RC 明确是预发布版本，仍存在 API/互操作限制，不能回填成 Vue 3.5 稳定功能。
- CSS
@scope：浏览器标准逐步成熟，不代表 Vue SFC 已经改用它。当前 scoped CSS 文档仍描述 PostCSS 与data-v-*的编译方式。 - AsyncContext：截至核查时 TC39 仍为 Stage 2 Draft。Vue 的
<script setup>顶层await由编译器恢复上下文，不能说 Vue 已依赖原生 AsyncContext。 - DOM Parts：仍是方向性平台提案，没有证据表明它已成为 Vue 的稳定依赖或通用 Web API。
所以，2023 年底“给出可用 Vapor”的目标应理解为当时预期，而非发布承诺。一个提案最终可能稳定、拆分后稳定，也可能被放弃，这正是框架演进的正常过程。
官方资料与原文来源
- 掘金原文
- VueConf US 2023：State of the Vuenion
- Vue 3.3 · Vue 3.4 · Vue 3.5 · Vue 3.6.0-rc.1（预发布）
- VitePress 1.0
<script setup>API- Reactivity Transform 已移除说明
- Reactive Props Destructure RFC #502
- Dropped Reactivity Transform RFC #369
- Vapor Mode
- W3C CSS Cascade 6 · TC39 AsyncContext · WICG DOM Parts
作者：ssh_晨曦时梦见兮 原文发布于 2023-07-17，首发公众号“前端从进阶到入院”，后发表于稀土掘金。