Vue 3 將推出無虛擬DOM版，更快了！
在 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。
