Vue 3.6 進入 RC：Vapor Mode 功能全部到齊，不經虛擬 DOM 也能跑 Vue 元件

一句話看懂：Vue 3.6.0-rc.1 在 7 月 18 日釋出，官方說 Vapor Mode 的預定功能已經完成，同時底層的反應式系統也重寫過；Vapor 完全是自己選擇才啟用，但有幾項功能不支援。

先用白話講：Vapor Mode 是什麼？

Vue 現在更新畫面的方式，像是請一位「秘書」幫忙：資料變了，先在腦中畫一張新版的「草稿圖」（虛擬 DOM），拿去跟舊草稿比對，找出差異，再去改真正的網頁。這個流程很聰明，但多了一層草稿圖的成本。

Vapor Mode 的想法是：編譯的時候就先想好「哪個資料變了，要改網頁上的哪一個點」，執行時直接去改，省掉比對草稿的那一層。官方的目標是讓基本的程式包變小、效能變好。

發生什麼事

根據 Vue 官方 GitHub 的 v3.6.0-rc.1 發行說明（2026-07-18）：

• 進入 RC 階段：官方說 Vapor Mode 預定的功能已經全部完成，所以進入 RC（候選版）
• 反應式系統重寫：@vue/reactivity 以 alien-signals 為基礎大幅重構，官方說效能與記憶體使用都明顯改善
• 效能：官方說 Vapor 在第三方的 js-framework-benchmark 裡，跟 Solid 和 Svelte 5 達到同一水準
• 選擇性啟用：Vapor 是 100% 自己選擇才開，只支援既有 Vue API 的一部分

另外，3.6.0-rc.1 也修了一批 hydration（讓伺服器端渲染的網頁變成可互動）與 Vapor 插槽相關的錯誤。後續：7 月 22 日又釋出了 3.6.0-rc.2，內容這裡不展開。

怎麼用？有哪些限制？

只支援 <script setup> 與純樣板的單檔元件（Options API 不支援），用 vapor 標記啟用：

<script setup vapor>
// 這個元件用 Vapor 編譯
</script>

也可以寫成 <script vapor>，或把標記放在 <template vapor>，整個元件都用 Vapor。

目前不支援或不適用的功能（官方列表）：

• Options API
• app.config.globalProperties
• getCurrentInstance()（在 Vapor 元件裡會回傳 null）
• @vue:xxx 這種逐元素的生命週期事件
• v-memo
• 元件的樣板參照拿不到 $el、$props、$attrs、$slots、$refs 這類屬性

給開發者的技術細節

建立應用程式：整個專案都是 Vapor 元件的話，用 createVaporApp()，可以不帶進虛擬 DOM 的執行環境，基本包體大幅縮小：

import { createVaporApp } from 'vue'
import App from './App.vue'

createVaporApp(App).mount('#app')

跟一般元件混用：在既有專案裡用 Vapor 元件，要安裝 vaporInteropPlugin。官方提醒：這個互通目前涵蓋基本的 props、事件和插槽，還不包含所有邊角情況，用「以虛擬 DOM 為基礎的元件庫」可能遇到粗糙的地方；官方建議把應用分成不同區域，各自用一種模式，少做混合巢狀。用 render function 或 JSX 寫的元件仍然是一般模式，也需要互通。

幾個行為差異：

• 事件委派：Vapor 會把符合條件的事件交給 document 統一處理，如果上層元素呼叫了 stopPropagation()，事件到不了 document，被委派的處理函式就不會執行
• slots.default() 在 Vapor 裡不是無副作用的「偷看」：呼叫它會實際執行插槽的渲染邏輯，官方建議把插槽渲染留給樣板處理
• 自訂指令的介面跟一般模式不同

官方目前建議的用法有兩種：現有應用裡把一個效能敏感的頁面改成 Vapor，或是整個用 Vapor 做小型的新應用。

我的看法

這次最值得注意的是官方的態度：RC 階段、功能完成，但同時白紙黑字寫了「建議局部使用」。換句話說，它是個可以開始試的東西，不是要你馬上全面搬家。

我會把它分成兩類看。大型的既有專案，用了很多 Options API、元件庫、全域屬性，現在不太適合動；小型的新專案或單一的效能熱點頁面，倒是很適合拿來試。如果你用的是 Nuxt 之類的框架，官方這份發行說明沒有提到框架層的支援狀況，要先看框架自己的公告，不要自己假設。

名詞小辭典

• 虛擬 DOM（Virtual DOM）：用一份輕量的資料結構描述畫面，更新時比對新舊差異，再去改真正的網頁。
• RC（Release Candidate）：候選版，功能已經確定，主要在找問題、準備成為正式版。
• 反應式系統（Reactivity）：資料一變、畫面自動跟著變的機制，是 Vue 的核心。
• Hydration：伺服器先送出做好的網頁，瀏覽器再讓它「活起來」、能夠互動的過程。

資料來源

• Vue 官方 GitHub：v3.6.0-rc.1 發行說明（2026-07-18）