仮想DOMを介さないVue 3.6のVapor Mode

Vueはこれまで、テンプレートを仮想DOMに変換し、再描画のたびに新旧のツリーを比較して差分だけをDOMへ反映してきました。この比較と反映の層を取り除くのが、Vue 3.6で実用段階に入ったVapor Modeです。

Vapor Modeが仮想DOMを置き換える

Vapor Mode：テンプレートをコンパイル時に直接DOM操作のコードへ変換し、仮想DOMの差分計算を介さずに描画する方式。

仮想DOMモードは、状態が変わると新しいツリーを作って前回と比べ、変わった箇所を見つけてからDOMを書き換えます。Vapor Modeはこの中間表現を持たず、どの状態がどのDOMに対応するかをコンパイル時に確定させ、変化した値が対応する箇所を直接更新します。差分計算のためのランタイムを積まない分、配信するコードが小さくなり、@vue/reactivityの処理速度とメモリ使用量も改善します。Vueの公式リリースノートは、サードパーティのベンチマークでSolidやSvelte 5と同水準の性能を示したと記しています。

既存モードとの機能差はSuspenseだけ

新しい描画方式が、すぐ全機能で使えるとは限りません。Vue 3.6のリリースノートは、Vapor Modeが仮想DOMモードの安定機能と機能パリティに達したと述べています。例外はSuspenseで、Vapor単体では使えません。ただし仮想DOM側のSuspenseの内側にVaporコンポーネントを置くことはできるため、機能を捨てる必要はありません。

なお<Transition>や<KeepAlive>はベータ期間中も修正が続いており、Vaporのみの構成で全面的に頼れると公式が明言したわけではありません。対応が進行中の項目とみておくのが安全です。

コンポーネント単位で有効にする

Vapor Modeは、アプリ全体を一度に切り替えるのではなく、コンポーネントごとに選びます。<script setup>にvaporを付けたコンポーネントだけがVaporとしてコンパイルされます。

<script setup vapor>
// Composition API のコードはそのまま使える
</script>

対象はComposition APIに限られ、Options APIは現時点で対応しません。仮想DOMのコンポーネントとVaporのコンポーネントは混在でき、相互に呼び出せます。この設計のおかげで、既存のアプリを一気に書き換えず、負荷の高い画面から段階的に移せます。

リアクティビティ基盤も入れ替わった

Vue 3.6は描画方式だけでなく、状態追跡の土台も置き換えました。リアクティビティをalien-signalsベースに作り直し、@vue/reactivityの性能とメモリ効率を引き上げています。Vaporを使わない通常のコンポーネントも、この基盤刷新の恩恵を受けます。

正式版はまだ先

ここまでの内容は、安定版ではなくベータでの状況にもとづきます。2026年6月時点の最新はv3.6.0-beta.16で、正式版はまだ出ていません。ベータの間はAPIや挙動が動く余地があり、<Transition>周りのように修正が続いている部分もあります。

本番のコードベースに今すぐ全面採用するのは時期尚早で、検証環境で重い画面に限って試し、ベンチマークで効果を測る使い方が現実的です。具体的な高速化やバンドル削減の数値は解説記事ごとにばらつきがあり、公式が明言しているのは「Solid・Svelte 5と同水準」という表現にとどまります。数字を引くときは出典を確かめておきたいところです。

レンダリング戦略の比較という観点では、当ブログのSvelte / SvelteKit 入門やReactコンパイラの実践も参考になります。

参考

• Vue 3.6 beta.1 リリースノート（GitHub）
• vuejs/core リリース一覧（GitHub）
• Try out Vapor and Alien Signals（Vue 公式 Discussion）
• Svelte / SvelteKit 入門（当ブログ）
• Reactコンパイラの実践（当ブログ）