在 Vue 過氣前要學的第九件事 - Virtual DOM 要走入歷史了嗎? / Vapor Mode

17th鐵人賽 vue.js javascript vue3 vue3 composition api

Yanya

2025-09-09 00:02:44

106 瀏覽

分享至

前言

Vue 3.6.0-alpha.1 推出了，其中最特殊的應該就是這個 Vapor Mode 了，
就來看一下這個新的模式會有什麼幫助吧。

概述

Vapor Mode 是 Vue SFC 的全新編譯 * 模式，
目的是為了減少 Bundle Size 並提高性能，完全向下兼容，
並在第三方基準測試中表現與 Solid * 和 * Svelte 5 * 相同水準。

編譯器負責把我們撰寫的程式碼轉成瀏覽器看得懂的程式碼。
— 在 Vue 過氣前要學的第八件事 - 一次了解渲染機制

Solid 和 Svelte 5 兩者都是較新的前端框架

根據尤雨溪在 VueConf 2025 所說的:

Vapor Mode 是一個為了極致性能而存在的全新的編譯和渲染模式。

上面這兩張圖的差異不用了解到太細，只要知道一個結論，
要升級到 Vapor Mode 幾乎不需要做什麼異動，底下依賴響應式系統基本是可以覆用。

在這個模式下繞過了 vDOM，性能直逼 vanilla JS *

vanilla JS :
不依賴任何框架或函式庫的純原生 JavaScript。

那目前 alpha 階段有一些問題，例如 SSR，異步元件，etc.，
不過這些貌似會在後續的版本中全部解決。

然後 Vapor Mode 只支持 Composition API，這點要注意。

使用

使用上非常簡單，有兩種方式，混合模式跟純 vapor 應用

混合模式

只要在想要應用模式的元件 <script setup> 加上 vapor 屬性，就能夠讓該組件變成 vapor 組件，

這個方法還是允許內部使用 vDOM 元件，但還是會保留 vDOM 的 runtime，
這個操作會 相對的抵銷我們所減少的 bundle size。

<script setup vapor>
// ...
</script>

純 Vapor 應用

使用 createVaporApp，
此方法會避免拉入 vDOM，大幅減少 bundle size。

不過就我目前的使用來說有遇到以下問題

import { createVaporApp } from "vue";
import App from "./App.vue";

createVaporApp(App).mount("#app");

當我們直接用 createVaporApp() 取代 createApp() 的時候，會噴錯

這部分我還沒有找到相關來源解決這個問題，
不過上面的混合模式 <script setup vapor> 是可以正常使用的，

歡迎有遇過相同問題的朋友幫大家解惑。

最後我想，千言萬語都比不上你直接去嘗試得快，
所以這邊直接以 Vue 官方的遊樂場練習，你也不用開一個專案。

第一步就是先幫我把版本調整到 v3.6.0-alpha.1 或 v3.6.0-alpha.2 都可以。

第二步請幫我點擊右上的 Tabs 裡的 JS 讓我們可以看到編譯後的 JavaScript 差異。

第三步跟我們上面說的一樣, 在 <script setup> 加上 vapor，即可啟動混合模式。

這時你會發現在 render function 內有非常大的不一樣。

還記的我們昨天說的，在 Vapor Mode 出來之前，Vue 是仰賴於 vDOM,
並嘗試透過 cache，patch 等等的方式去優化，但這只是治標不治本。

Vapor 是從本質上去改變編譯方式，直接不去建構 vNode，
而是嘗試把 SFC 編譯成類似原生 JS 的操作方式，讓他無限接近原生 JS 的速度

這時我突然想到說 :

vDOM 不就是為了省去 龐大組件下少量修改所帶來的效能消耗 而聞名的嗎?
那要是拔掉 vDOM，怎麼去解決這個問題。

因此我們來嘗試新增好幾個 h1，並修改單獨一個節點的內容

這邊可以看到在初始化時，就對每個節點建立變數引用，
這樣之後只要有該節點的變化，就只針對那個節點進行重渲染就好。

結語

此篇文章中我們帶過了 Vue3.6-alpha 版本最新的 Vapor Mode
講解了過去和 Vapor Mode 下所帶來的編譯差異, 以及為什麼要這樣做
過去在學習前端的時候總是會聽到 vDOM 怎樣好、怎樣棒,
但其實不是在所有情況下 vDOM 都是最佳解答,
我們從這個篇章一開始講響應式核心，alien-signals，
渲染機制到現在講 Vapor Mode ，可以發現都是環環相扣的，