Vue 3.6 在開發寫法上沒有落差很大，但是他的底層效能真的是超級黑魔法，今天就讓我們一起探討讓多個 composable 一起跑，依然順暢的底層黑魔法！

在 Day 16 ~ Day 18 我們談了：

• Composable 拆分策略：單一職責、拆小才能自由組裝。

• 作用域管理：effectScope 與 onScopeDispose，確保副作用能被正確清理。

這些技巧，乍看只是「開發者層的便利」，但實際上，Vue 3.6 的 runtime 也在悄悄進化，讓這些小技巧能在更快的底層引擎上運作。

他們就是... Vapor Mode 與 Alien Signals。

依賴追蹤的挑戰：composable 越多，負擔越大

Day 18 我們透過 effectScope 來管理 tab 內的資料更新：

tabScope.run(() => {
  useAutoRefresh(() => fetch(`/api/${name}`))
})

每個 ref、computed、watchEffect 都需要「收集依賴 → 訂閱變化 → 觸發更新」。

問題是：當 composable 被拆得很細、同時運作的數量增加時，Vue 需要建立大量的依賴鏈，更新時就得計算更多 Diff。

關於這個問題 Vue 3.5 暫時無法有效解決，導致效能會跟著線性下滑，於是在今年公開演講提及這也是 Vue 3.6 想解決的瓶頸之一。

Vapor Mode：跳過 Virtual DOM 的快車道

傳統 Vue 的更新流程雖然保證一致性，但當 composable 很多時，哪怕只是一個小型的 ref 變動，也得跑完整個 Virtual DOM Diff。

React.js 也是走這套流程，所以學完 React.js 後的學習指南就 2 條路，Next.js 或是優化效能。

Vapor Mode 的思路是：既然模板可以在編譯階段就知道 DOM 結構，為什麼不直接輸出「最小化的 DOM 操作指令」還要再經一手 Virtual DOM？？

於是 Vue 3.6 啟用 Vapor Mode，不再生成中間的 Virtual DOM，結果就是：多個 Composable 同時更新，也能維持極低的渲染成本。

Alien Signals：更聰明的依賴追蹤

effectScope 解決了「清理」問題，但依賴收集本身在 Vue 3.5 仍沿用 Dep + Watcher 的機制。

Vue 3.6 引入 Alien Signals：

• 每個 ref / computed 都是一個「信號 (signal)」。
• 信號是原子更新單位，變化時只會通知實際需要的消費者。
• 不需要再為每個 scope 建立繁雜的 Watcher。

效果是什麼？

• Composable 可以拆得更細，不會因為數量增加就放慢。
• 多個 scope 同時更新，也不會重複收集依賴。

動態 tab + effectScope 範例提及這段程式碼：就算同時開啟多個 tab，Alien Signals 確保只更新真正被影響的 DOM 節點。

tabScope.run(() => {
  useAutoRefresh(() => fetch(`/api/${name}`))
})

小結

Vue 3.6 不只是語法糖的更新，而是 runtime 架構的大躍進：

• Vapor Mode：直接 DOM Patch，少掉 Virtual DOM Diff。

• Alien Signals：重新設計依賴追蹤，減少不必要的更新。

前幾篇學到的 composable 拆分、scope、清理技巧，在這套全新引擎下，將發揮更大的效能優勢。

參考資料

1. What Is Vue 3 Vapor Mode?!
2. Vue Vapor Mode深度解析：開啟無虛擬DOM的高效JavaScript編譯策略
3. Navigating React.js: The Power and Purpose of the Virtual DOM