一句話版本：在 <script setup vapor> 下，Vue 編譯器直接把你的 <template> 編譯成“直達真實 DOM 的更新函數(shù)”，跳過 VDOM 的創(chuàng)建與 diff。代碼幾乎不改，頁面更快、包更小。

為什么當年要有 VDOM

早期框架直接手搓 DOM，既慢又容易出錯。VDOM 的套路是：

1. 生成新的虛擬樹
2. 和舊樹 diff
3. 計算最小變更
4. 一次性打到真實 DOM

這大幅降低了心智負擔，但“創(chuàng)建 VNode + 運行時 diff”本身要吃 CPU 和內(nèi)存。Vue 3 通過靜態(tài)提升、Patch Flag 等優(yōu)化掉了大量浪費，但仍然要在運行時構(gòu)建/對比 VNode。

Vapor Mode 怎么做的

Vapor 把工作前移到編譯期。編譯器把 <template> 變成直連 DOM 的更新代碼，不再生成 VNode 也不做運行時 diff。它會：

• 創(chuàng)建 DOM 節(jié)點
• 精確追蹤哪個節(jié)點依賴哪個響應(yīng)式值
• 值變了，就只更新那一個節(jié)點

你寫的仍是普通組件：

<script setup vapor>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">
    Count: {{ count }}
  </button>
</template>

編譯產(chǎn)物的要點（意譯）：

// 創(chuàng)建 <button>，設(shè)置文本與點擊事件
// 訂閱 `count`，只在 count 變化時更新文本節(jié)點

依舊靠 Vue 的響應(yīng)式（Proxy + effect 追蹤）來精準觸發(fā)最小更新：更少 JS、占更少內(nèi)存、更新更快。

性能收益（來自官方/基準示例）

• 包體（Hello World）：VDOM 22.8 kB → Vapor 7.9 kB（-65%）
• 復雜列表 diff：Vapor ≈ 1.66×（~40% 更快）
• 內(nèi)存峰值：Vapor ≈ 58%（-42%）

結(jié)論：首包更小兩倍有余，運行時內(nèi)存減半左右。

如何啟用

最小改動：在 <script setup> 上加 vapor 屬性。

<script setup vapor>
// 你的代碼
</script>

注意點

• Options API：暫不支持，繼續(xù)用 <script setup>。
• 自定義指令：新形態(tài)接收“值的 getter”，可返回清理函數(shù)：

const MyDirective = (el, valueGetter) => {
  watchEffect(() => {
    el.textContent = valueGetter()
  })
  return () => console.log('卸載時清理')
}

官方提供 codemod 遷移舊指令。

• 與 UI 庫互通：用 vaporInteropPlugin，常規(guī) props / 事件 / 插槽可用，復雜組件需實測。
• 零 VDOM 項目腳手架：

npm init vue@latest --template vapor

何時采用：三用三不用

? 立刻用在：

• 首頁/落地頁等性能敏感模塊
• 新項目（createVaporApp）
• 內(nèi)部試點：跑用例、提 issue、打磨邊界

? 暫緩使用在：

• 一次性遷整站（API 仍在收斂）
• 嚴重依賴 Nuxt SSR / <Transition> / <KeepAlive> 的場景
• 深度混用多層級 VDOM 生態(tài)庫 且耦合復雜的頁面

開發(fā)者最常問的 5 個問題

1. 舊代碼需要重寫嗎？不需要。多數(shù)場景只加 vapor 即可，模板/邏輯不變。
2. 自定義指令怎么改？按“getter + 可選清理函數(shù)”的新接口改；用官方 codemod 批量遷移。
3. Element Plus / Ant Design Vue 能用嗎？配上 vaporInteropPlugin 基本可用，復雜組件請逐個驗證。
4. TypeScript 支持怎么樣？完整支持。類型會透傳，@vue/runtime-core 里新增 VaporComponent 類型；無需額外配置。
5. 和 React Concurrent / Angular Signals 比呢？Vapor 的運行時開銷接近 Solid/Svelte 一檔；優(yōu)勢在于遷移成本極低——很多場景就是**“一行 flag”**。

小結(jié)

Vapor Mode 把“diff 工作搬到編譯期”，讓運行時只做精確更新。 對于追求首屏、交互速度、包體的頁面來說，幾乎是“白拿的收益”。

建議做法：挑一兩個關(guān)鍵頁面開 vapor 試跑，對照包體、渲染時間、內(nèi)存峰值；如果穩(wěn)定，就在更多模塊逐步落地。