在 2022 年的 VueConf 活動(dòng)中，Vue 的作者尤雨溪首次提出了 Vapor Mode 的概念，這是一個(gè)受到 Solid 啟發(fā)的編譯策略，它打破了對(duì)虛擬 DOM 的依賴，轉(zhuǎn)而充分利用 Vue 內(nèi)置的響應(yīng)性系統(tǒng)，帶來了顯著的性能提升。目前，Vapor Mode 已經(jīng)推出了實(shí)驗(yàn)版本，可以在 steam-repl.netlify.app 上先行體驗(yàn)。

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

Vapor Mode 概念

Vapor Mode 是一種正在試驗(yàn)中的編譯策略，其靈感來源于 Solid。對(duì)于相同的 Vue SFC，與當(dāng)前基于虛擬 DOM 的編譯結(jié)果相比，Vapor Mode 能夠生成性能更高、內(nèi)存使用更少、運(yùn)行時(shí)支持代碼更少的 JavaScript 輸出。它的目標(biāo)是通過編譯為更高效的 JavaScript 來提升應(yīng)用的性能。當(dāng)在應(yīng)用級(jí)別使用時(shí)，Vapor Mode 可以完全去除虛擬 DOM，從而減小應(yīng)用的包大小，進(jìn)一步優(yōu)化應(yīng)用的性能。

Vapor Mode 目前仍處于開發(fā)階段，相關(guān)要點(diǎn)如下：

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

? 使用 Vapor Mode 的好處如下：

• 性能更佳
• 使用更少的內(nèi)存
• 需要更少的運(yùn)行時(shí)支持代碼。

Vapor Mode 期望實(shí)現(xiàn)的功能如下，目前還有一部分正在實(shí)現(xiàn)中：

Vapor Mode 使用

在組件層面

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

最終目標(biāo)是在同一個(gè)應(yīng)用中自由混合 Vapor 和非 Vapor 組件。

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

在應(yīng)用層面

通過這種方式編譯的應(yīng)用程序?qū)⒛軌蛲耆珓h除虛擬 DOM 運(yùn)行時(shí)，只包含極為輕量級(jí)的@vue/reactivity和vapor mode 運(yùn)行時(shí)輔助程序。與當(dāng)前使用虛擬 DOM 的 Vue 3 應(yīng)用的基線大小（約50KB）相比，這樣編寫應(yīng)用的基線大小僅為約6KB，實(shí)現(xiàn)了高達(dá)88%的壓縮比！

關(guān)鍵點(diǎn)

• 這是一項(xiàng)可選功能，不會(huì)影響現(xiàn)有的代碼庫(kù)。如果計(jì)劃將 Vue 版本升級(jí)到包含 Vapor Mode 的版本，這不會(huì)引入任何與 Vapor Mode 相關(guān)的重大更改。
• Vapor Mode 將能夠與vDOM組件進(jìn)行互操作。因此，如果希望使用像 Vuetify 這樣的虛擬 DOM 庫(kù)， Vapor Mode 仍然能夠支持它。

Vapor Mode 未來

Vapor Mode 仍在開發(fā)中，目前正處于第三階段。

第一階段：核心功能的運(yùn)行時(shí)

在這個(gè)階段，引入了所有 Vapor 運(yùn)行時(shí)相關(guān)的幫助生成代碼的輔助程序。這個(gè)階段已經(jīng)基本完成。

?? 階段目標(biāo)：

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

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

這一階段的主要重點(diǎn)是確?？梢允褂?Vue 模板或 JSX 并將其轉(zhuǎn)換為運(yùn)行時(shí)可以處理的內(nèi)容。

?? 階段目標(biāo)：

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

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

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

模板和 JSX 都經(jīng)過轉(zhuǎn)換為相同的中間表示，最終編譯為 Vapor 代碼。

第三階段：集成

Vue 的目標(biāo)是讓 Vapor 能夠無(wú)縫地融入現(xiàn)有的應(yīng)用，而無(wú)需對(duì)當(dāng)前的設(shè)置進(jìn)行任何修改。可以在組件級(jí)別進(jìn)行選擇，以便能夠逐步將其引入到應(yīng)用的一部分中，或者特別是在性能關(guān)鍵的區(qū)域中使用。這樣，可以根據(jù)需要靈活地利用Vapor，并在需要時(shí)將其引入到現(xiàn)有的應(yīng)用程序中。

?? 階段目標(biāo)：

• 對(duì)獨(dú)立 Vapor 應(yīng)用的工具支持
• 在現(xiàn)有應(yīng)用中運(yùn)行 Vapor 組件
• 在 Vapor 中運(yùn)行 vDOM 組件

第四階段：功能對(duì)等

在首次發(fā)布時(shí)，Vapor Mode 將僅提供基本的核心功能，而諸如<Transition />、<KeepAlive />、<Teleport />、Suspense 等輔助功能將在 Vue 團(tuán)隊(duì)完成前述目標(biāo)后進(jìn)行實(shí)現(xiàn)。

小結(jié)

Vapor Mode 是 Vue.js 正在研發(fā)的、專注于性能的新型編譯策略。通過使用相同的模板，特別是 Composition API 和＜script setup＞，Vapor Mode 能夠生成更高性能的輸出。開發(fā)者可以選擇為單個(gè)組件或整個(gè)應(yīng)用啟用 Vapor 模式。最終目標(biāo)是實(shí)現(xiàn)在同一應(yīng)用中自由混合使用 Vapor 和非 Vapor 組件，且不會(huì)引發(fā)任何問題。初期，Vapor Mode 將以僅包含 Vapor 樹的虛擬 DOM 為基礎(chǔ)，并逐步增強(qiáng)其互操作性。

相關(guān)鏈接：

• 無(wú)虛擬 DOM 版 Vue 存儲(chǔ)庫(kù)：https://github.com/vuejs/core-vapor。
• 在線體驗(yàn) Vapor Mode ：https://vapor-repl.netlify.app/。
• 參考文章：https://icarusgk.hashnode.dev/vue-3-vapor-mode。