Vapor Mode 下 Pinia、VueUse、Router 的加速與陷阱

在前面幾天，我們已經實測過 Vapor Mode 與 Alien Signals 的威力：

• 無 Virtual DOM -> 跳過 Diff，效能直接起飛

• 細粒度追蹤 -> 多個 composable 一起運作依然高效

但真實專案往往不只是 Vue 核心而已，還包含 Pinia、VueUse、Vue Router 等周邊套件。

那麼問題來了：這些套件在 Vapor Mode 下能自動受惠嗎？還是藏著踩雷陷阱？？？

以下我們從三個最常見的生態系套件出發，逐一解析。

Pinia：天然受惠，但細節仍要注意

Pinia 是 Vue 官方推薦的狀態管理庫，它的核心就是包裝在 Vue 的 reactivity 系統上。

因此當 Vue 3.6 的底層 reactive 改成 Alien Signals 時，Pinia 不需要任何改動就能獲得效能紅利。

自動加速的原因

• Pinia 的 store.state 本質是 reactive() → Vapor Mode/ Alien Signals 提升 依賴收集速度，Pinia 自然跟著加速。

• 由於 Vapor Mode 直接跳過 Virtual DOM，Pinia 的更新更快映射到畫面。

實務踩雷

然而，加速不代表可以忽略細節，如果在 Pinia 中若直接 解構 store，例如：

const { count } = useCounterStore()  // 直接解構會失去響應

解構後的 count 不再是 reactive，會導致畫面不更新！解法是使用 storeToRefs 或 computed 包裝：

const { count } = storeToRefs(useCounterStore())

重點：即使底層 reactive 更快，仍需遵守正確寫法，否則效能優勢完全浪費。

VueUse：組合式工具的 Scope 清理

VueUse 提供各種 composable，例如 useLocalStorage、useMouse 等，它們內部大多透過 watchEffect 或 ref 實現。

在 Vapor Mode 下，這些工具同樣 自動受惠，因為依賴追蹤更細緻。

跨套件同步陷阱

如果將 useLocalStorage 與 Pinia 混用，例如：

state: () => ({
  theme: useLocalStorage('theme', 'light')
})

在不同瀏覽器 tab 間同步時，若沒有正確監聽 Storage Event，可能出現延遲或不同步問題。

重點：Vapor Mode 無法解決跨 session 的同步問題，這屬於業務邏輯層，仍需自行處理事件監聽。

Vue Router：導航切換的效能觀察

Vue Router 內部並不大量依賴 Virtual DOM，主要是 路由狀態 + 元件切換。

因此 Vapor Mode 的直接加速有限，但 Alien Signals 仍可在以下場景幫助：

• 多 tab / 動態 nested route：大量依賴 watch 與 computed 的地方會更快。

與 Pinia 結合做 路由守衛存取權限 時，Pinia 更新 → 路由響應更即時。

小結

• Pinia：天然受惠，但仍需使用 storeToRefs 等正確寫法。

• VueUse：底層 reactive 更快，但跨 session 同步需自行處理。

• Vue Router：主要受益於 Alien Signals 提升的依賴收集速度。

• Vapor Mode 雖強，但外部套件的最佳化仍取決於開發者的狀態設計與事件監聽策略。

參考資料

1. vue3 + pinia: how to make reactive a value from the store
2. Pinia with VueUse useLocalStorage + useSessionStorage Hybrid?
3. Mastering Vue 3.6’s Alien Signals: Practical Examples and Use Cases
4. Vue 3.6 and Vapor Mode: This is Another Level
5. stackblitz/alien-signals
6. npm - alien-signals