在 2022 年的 VueConf 活動中，Vue 的作者尤雨溪首次提出了 Vapor Mode 的概念，這是一個受到 Solid 啟發的編譯策略，它打破了對虛擬 DOM 的依賴，轉而充分利用 Vue 內置的響應性系統，帶來了顯著的性能提升。目前，Vapor Mode 已經推出了實驗版本，可以在 steam-repl.netlify.app 上先行體驗。

下面就來看看 Vapor Mode 是什么，如何使用，以及它的未來！

Vapor Mode 概念

Vapor Mode 是一種正在試驗中的編譯策略，其靈感來源于 Solid。對于相同的 Vue SFC，與當前基于虛擬 DOM 的編譯結果相比，Vapor Mode 能夠生成性能更高、內存使用更少、運行時支持代碼更少的 JavaScript 輸出。它的目標是通過編譯為更高效的 JavaScript 來提升應用的性能。當在應用級別使用時，Vapor Mode 可以完全去除虛擬 DOM，從而減小應用的包大小，進一步優化應用的性能。

Vapor Mode 目前仍處于開發階段，相關要點如下：

• Vapor Mode 主要適用于對性能有高要求的場景。它作為一項可選功能，不會對現有代碼庫產生影響。
• 開發者能夠將 Vapor 組件子樹無縫集成到現有的 Vue 3 應用中。理想情況下，我們希望在組件級別實現粒度選擇，使 Vapor 組件和非 Vapor 組件能在同一個應用中自由混用。
• 僅使用 Vapor 組件構建應用可以顯著減少 bundle 中的虛擬 DOM 運行時，從而降低基準運行時大小。
• 為了實現最佳性能，Vapor Mode 將僅支持 Vue 功能的一個子集。具體來說，Vapor Mode 組件將僅支持 Composition API 和 <script setup>。這個受支持的子集在 Vapor 和非 Vapor 組件之間具有相同的工作方式。

? 使用 Vapor Mode 的好處如下：

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

Vapor Mode 期望實現的功能如下，目前還有一部分正在實現中：

Vapor Mode 使用

在組件層面

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

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

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

在應用層面

通過這種方式編譯的應用程序將能夠完全刪除虛擬 DOM 運行時，只包含極為輕量級的@vue/reactivity和vapor mode 運行時輔助程序。與當前使用虛擬 DOM 的 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 Mode 能夠生成更高性能的輸出。開發者可以選擇為單個組件或整個應用啟用 Vapor 模式。最終目標是實現在同一應用中自由混合使用 Vapor 和非 Vapor 組件，且不會引發任何問題。初期，Vapor Mode 將以僅包含 Vapor 樹的虛擬 DOM 為基礎，并逐步增強其互操作性。

相關鏈接：

• 無虛擬 DOM 版 Vue 存儲庫：https://github.com/vuejs/core-vapor。
• 在線體驗 Vapor Mode ：https://vapor-repl.netlify.app/。
• 參考文章：https://icarusgk.hashnode.dev/vue-3-vapor-mode。