我們在桌機環境測過 Vapor Mode + Alien Signals 的效能提升。

然而，桌機硬體往往遠比行動裝置強大，實際上線的用戶端多數是手機，這篇就來挑戰一個關鍵問題： Vapor Mode 在低階手機上，真的有體感提升嗎？

測試目標

1. 比較平台：

   • iPhone 8 (iOS 16 / Safari)

   • Android 低階機 (Snapdragon 665 / Chrome)

   • 參考組：桌機 (Chrome 140)

2. 測試場景：

   • 1,000 個同時運作的 composables（大量 watchEffect + ref 更新）

   • 高頻率事件更新（滑動 / resize / 連續 input）

   • 開啟/關閉 Vapor Mode 做 AB Test

測試環境建置

啟用 Vapor Mode

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({ vapor: true })]
})

Vapor Mode 為 Vue 3.6 新增選項，透過編譯跳過 Virtual DOM Diff。

建立壓力場景

<script setup lang="ts">
import { ref, watchEffect } from 'vue'

const boxes = Array.from({ length: 1000 }, (_, i) => ref(0))

setInterval(() => {
  boxes.forEach((b, i) => (b.value = (b.value + 1) % 1000))
}, 16) // 每 16ms 更新一次
</script>

<template>
  <div class="grid">
    <div v-for="b in boxes" :key="b" class="box">{{ b }}</div>
  </div>
</template>

測試工具

• iPhone / Android：Safari / Chrome → 打開 Performance 或 Remote Debug。
• 桌機：Chrome DevTools → Performance & Lighthouse。

測試結果

低階裝置差異最明顯：iPhone 8 與 Android 舊機的 FPS 接近 翻倍。
桌機提升有限：因為 CPU/GPU 足夠，Virtual DOM Diff 的成本相對小。

為什麼低階機差異如此大？

1. Virtual DOM Diff 成本

   • 舊型 CPU 單核心性能低，Patch 過程成為瓶頸。

   • Vapor Mode 直接輸出 DOM 更新指令，省下比較運算。

2. GC (Garbage Collection)

   • 傳統 VDOM 需要生成大量 JavaScript Object。

   • Vapor Mode 減少 VNode 建立 → 減少 GC 觸發次數。

3. Alien Signals 精準追蹤

   • 舊機記憶體頻寬較低，細粒度依賴追蹤減少多餘更新。

小結

• Vapor Mode 在低階手機上提供 最直接的體感提升。

• Alien Signals 讓高頻率依賴追蹤不再成為效能黑洞。

• 資源管理（圖片、CSS）仍是關鍵瓶頸，沒有任何框架能替你解決「下載與重排」的物理極限。

參考資料

1. 分析執行階段效能
2. v3.6.0-alpha.1