今年年初，尤雨溪在 2023 新年展望中提到了 Vue 3 “Vapor Mode”：

Vapor Mode 是一直在試驗的另一種編譯策略，其靈感來自于 Solid。給定相同的 Vue SFC，與當前基于虛擬 DOM 的輸出相比，Vapor Mode 將其編譯成性能更高、使用更少內存且需要更少運行時支持代碼的 JavaScript 輸出。它仍處于早期階段，這里有一些相關的要點：

• Vapor Mode 適用于主要關注性能的用例。它是可選的，不會影響現有的代碼庫。
• 開發者將能夠將 Vapor 組件子樹嵌入到任何現有的 Vue 3 應用中。在理想情況下，希望可以在組件級別實現粒度選擇，這意味著可以在同一個應用中自由混合 Vapor 組件和非 Vapor 組件。
• 僅使用 Vapor 組件構建應用允許從 bundle 中刪除虛擬 DOM 運行時，從而顯著減少 baseline 運行時大小。
• 為了獲得最佳性能，Vapor Mode 將僅支持 Vue 功能的一個子集。特別是，Vapor Mode 組件將僅支持 Composition API 和 <script setup> 。但是，這個受支持的子集在 Vapor 和非 Vapor 組件之間的工作方式完全相同。

下面就來詳細看看，Vapor Mode 是什么，它是如何工作的，以及它的未來！

Vapor Mode 是什么？

Vapor 模式是受 Solid.js 啟發的一種新的替代編譯策略。它旨在通過將代碼編譯為更高效的 JavaScript 輸出來增強應用的性能。

當在應用級別使用時，可以完全刪除虛擬 DOM，從而減少應用的包大小。

? 使用 Vapor Mode 的好處如下：

• 性能更佳
• 使用更少的內存
• 需要更少的運行時支持代碼。

Solid.js 具有與 Vue 非常相似的響應式系統，它們都在其響應式系統中使用代理，并具有基于讀取的自動跟蹤。這就是為什么 Vue 可以實現與 Solid.js 類似的編譯策略。

Vapor Mode 如何工作？

給定相同的 .vue 單文件組件，Vapor Mode 能夠將其編譯為性能更高的 JavaScript 輸出。

為了實現最佳性能，Vapor Mode 僅支持 Vue 功能的一個子集，包括新的 Composition API 和帶有＜script setup＞的.vue單文件組件（SFC），這些是 Vue 3 的新默認應用編寫方式。

現狀

目前，Vue 采用混合 VDOM/編譯器方法。編譯器獲取 SFC 的模板，對其進行分析并將其提供給虛擬 DOM。

這種編譯器通知的虛擬 DOM 方法使 Vue 在執行 DOM 操作時比 Svelte 4 等無 V-DOM 工具表現得更好。

如何使用 Vapor Mode？

在組件層面

可以使用 .vapor 文件名后綴來啟用它。

最終目標是在同一個應用中自由混合 Vapor 和非 Vapor 組件。

注意：Vapor Mode 最初將僅使用 Vapor 樹集成到 vDOM 中，并在此基礎上逐步提高它們之間的互操作性。

在應用層面

通過這種方式編譯的應用程序將能夠完全刪除虛擬 DOM 運行時，只包含極為輕量級的@vue/reactivity和 vapor mode 運行時輔助程序。與當前使用 vDOM 的 Vue 3 應用的基線大小（約 50KB）相比，這樣編寫應用的基線大小僅為約 6KB，實現了高達 88%的壓縮比！

關鍵點

這是一項可選功能，不會影響現有的代碼庫。如果計劃將 Vue 版本升級到包含 Vapor Mode 的版本，這不會引入任何與 Vapor Mode 相關的重大更改。

Vapor Mode 將能夠與 vDOM 組件進行互操作。因此，如果希望使用像 Vuetify 這樣的虛擬 DOM 庫， Vapor Mode 仍然能夠支持它。

Vapor Mode 發展階段

Vapor Mode 仍在開發中，下面有一些相關消息：

第一階段：核心功能的運行時

在這個階段，引入了所有 Vapor 運行時相關的幫助生成代碼的輔助程序。這個階段已經基本完成。

?? 階段目標：

• 支持核心指令（v-on、v-if、v-for 等）和組件樹。
• 驗證性能假設。
• 與現有 SSR 輸出的水合兼容性。

第二階段：核心功能的編譯器

這一階段的主要重點是確保可以使用 Vue 模板或 JSX 并將其轉換為運行時可以處理的內容。

?? 階段目標：

• 共享代碼生成 IR（中間表示）
• JSX AST / 模板 AST - IR - Vapor Mode 代碼

那為什么需要中間表示呢？

由于沒有虛擬 DOM，Vapor Mode 的編譯過程無需手動創建渲染函數。然而，一些用戶需要 JavaScript 的廣泛靈活性。在這種情況下，可以將 JSX 編譯為 Vapor 代碼。

模板和 JSX 都經過轉換為相同的中間表示，最終編譯為 Vapor 代碼。

第三階段：集成

Vue 的目標是讓 Vapor 能夠無縫地融入現有的應用，而無需對當前的設置進行任何修改。可以在組件級別進行選擇，以便能夠逐步將其引入到應用的一部分中，或者特別是在性能關鍵的區域中使用。這樣，可以根據需要靈活地利用 Vapor，并在需要時將其引入到現有的應用程序中。

?? 階段目標：

• 對獨立 Vapor 應用的工具支持
• 在現有應用中運行 Vapor 組件
• 在 Vapor 中運行 vDOM 組件

第四階段：功能對等

在首次發布時，Vapor Mode 將僅提供基本的核心功能，而諸如<Transition />、<KeepAlive />、<Teleport />、Suspense 等輔助功能將在 Vue 團隊完成前述目標后進行實現。

小結

• Vapor Mode 是 Vue.js 正在開發的一種新的面向性能的編譯策略；
• 它將使用相同的模板（假設使用的是 Composition API 和＜script setup＞，并產生更高性能的輸出）；
• 它將逐步采用，開發者可以選擇為單個組件或整個應用啟用 Vapor 模式。
• 最終目標是實現在同一應用中自由混合使用 Vapor 和非 Vapor 組件，而不會引發任何問題。不過，Vapor Mode 將首先以僅包含 Vapor 樹的 vDOM 為基礎，并在此基礎上逐步提高它們之間的互操作性。