Vueが軽く&速くなる！Vapor Modeを試してみた

Vapor Modeの概要と試してみた感想です。

Transcript

1. 2026.08.24 / VueSapporo #4 Vueが軽く&速くなる！Vapor Modeを試してみた 三浦 恒樹 (MIURA KOUKI) / 医療ITエンジニア
2. 自己紹介 - ドゥウェル株式会社 に所属（マネージャー） 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 TypeScript / Vue.js / Node.js / Java / C# / PHP - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 ゆるWeb勉強会 AWS初心者LT会in札幌 hokkaido.js さっぽろ医療IT勉強会 - コーディングBGM ラックライフ BLUE ENCOUNT SHANK Dizzy Sun Fist JBUG札幌 えびてく 札幌すごいAI会 函館本線沿線勉強会 JavaDO クラメソ札幌IT勉強会（仮） 札幌IT石狩鍋 VueSapporo ※運営 - Naru, 名前を呼ぶよ, 初めの一歩, 変わらない空 - Survivor, ポラリス
3. 話すこと
4. Vueの画面更新のしくみ
5. Vueの画面更新のしくみ Virtual DOM （仮想DOM）
6. Vueの画面更新のしくみ Virtual DOMを使わない 軽量・高速フレームワークの登場
7. Vapor Modeとは何か
8. Vapor Modeとは何か
9. Vapor Modeとは何か
10. 実際に動かしてみた感想 アプリ全体をVapor Modeにする。 Virtual DOM未使用＝バンドルサイズも削減 “vapor”を追加する 一部のSFCをVapor Modeにする。 Virtual DOM使用あり＝バンドルサイズは削減さ れない “setup”を省略できる ※Composition API のみ （Options API は非対応） “template”にも書ける
11. 実際に動かしてみた感想 10,000件のDIVを生成 そのうち1件を更新、 全件を更新 の時間を計測
12. 実際に動かしてみた感想 従来のVue Vapor Mode
13. 実際に動かしてみた感想 測定項目 従来のVue Vapor Mode 改善率 バンドルサイズ 65 KB 50 KB 23.0 % 初期表示 131 ms 116 ms 11.4 % 1/10,000件更新（10回平均） 22.97 ms 7.80 ms 66.0 % 全件更新（10回平均） 113.39 ms 111.40 ms 1.7 % ソフトウェアの使用時に一番多い、画面の一部を更新するユースケースでは、 Vapor Modeが圧倒的に速い！！
14. まとめ - - Vueの画面更新のしくみ - Vue3.5まで...Virtual DOMで差分計算後にReal DOM更新 / similar to react. - Vue3.6から...Real DOMの更新が必要な個所を直接更新 / similar to svelte. Vapor Mode - 100% opt-in=使用を宣言する - HTMLテンプレートをコンパイル時に解析して、データ変更時にReal DOMを直接書き 換えられるようにしておくコンパイルモード - 動かしてみた - - Vueの既存システムと融合されている（書き方は変わらない） 3倍速い 注意点 - 未対応・非対応...Options API, app.config.globalProperties, getCurrentInstance(), @vue:xxx etc.
15. ご清聴ありがとうございました。