Vue3.6.0-rc_CHANGELOG読み合わせ

GitHub vuejs/coreの 3.6.0-rcバージョン CHANGELOGの内容読み合わせ資料です。

Transcript

1. 2026.08.24 / VueSapporo #4 Vue 3.6.0-rc CHANGELOG読み合わせ 三浦 恒樹 (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. 今日の目的と方針 目的 方針 CHANGELOGを読みながら認識を合わせる CHANGELOGに書かれている内容だけを扱う • Vue 3.6で何が変わるのか • デモは行わない • Vapor Modeとは何なのか • Bug Fixの個別説明は行わない • どのような制約があるのか • 実装の詳細には踏み込まない • rc.2で何が変更されたのか • CHANGELOGにない内容は扱わない 「Vapor Modeはこういうものだ」という認識を、CHANGELOGの記述ベースで揃えるのがゴールです。
4. Vue 3.6.0-rc のリリース状況 vuejs/core minor branch CHANGELOG.md / 2026年8月23日時点 Version Release CHANGELOG上の位置づけ 3.6.0-rc.1 2026-07-18 Vapor Modeの説明（About Vapor Mode） 3.6.0-rc.2 2026-07-22 Event Delegationの変更 / BREAKING CHANGES 3.6.0-rc.3 2026-08-11 Bug Fixes 3.6.0-rc.4 2026-08-14 Bug Fixes 3.6.0-rc.5 2026-08-21 Bug Fixes / Performance Improvements 今日見るところ • rc.1 の「About Vapor Mode」 • rc.2 の「BREAKING CHANGES」 • rc.3 〜 rc.5 は概要のみ確認
5. 3.6.0-rc.1 — RCフェーズへ Vue 3.6 is now entering the RC phase Vapor Modeについて予定されていた機能パッケージの開発が完了したため、Vue 3.6はRCフェーズへ入った。 Vapor Mode @vue/reactivity • Vue SFC向けの新しいCompilation Mode • alien-signalsをベースとした大規模Refactor • Baseline Bundle Sizeの削減 • Reactivity SystemのPerformance改善 • Performanceの改善 • Memory Usageの改善 → 今日の中心は Vapor Mode ※alien-signals=超軽量かつ超高速な シグナル（Signal）ベースのリアクティビティ（状態管理）ライブラリ
6. About Vapor Mode — Vapor Modeとは？ Vue Single-File Components（SFCs）のための新しいCompilation Mode 目的と特徴 利用できないFeature • Baseline Bundle Sizeの削減 • VNodesに依存するもの • Performanceの改善 • Component Public Instance Proxyに依存するも の • 100% Opt-in / Vue APIのSubsetをサポート • SupportedなAPIはほぼ同一のBehavior 3rd party benchmarkでSolid / Svelte 5と同水準の Performanceを示している、とされている。 ＝ Vapor Modeは「Vue 3の全Featureをそのまま使えるMode」ではない。
7. General Stability Notes — 想定されている使い方 Vapor Mode is feature-complete in Vue 3.6 RC. 既存アプリ 新規アプリ Performance-sensitiveなPageなど、一部をVapor Modeで実装する。 小規模なApplicationをEntirely in Vapor Modeで構 築する。 ポイント Vapor Modeは、既存Vueアプリを一括して移行することを前提とした機能ではない。100% Opt-inで、Modeごとに範囲を区 切って利用する。
8. Opting In to Vapor Mode — SFCごとに明示的にOpt-in Template-only SFC / <script setup> をサポート。Options API は Not supported。 <script setup vapor> <script vapor> <template vapor> <script setup vapor> // ... </script> <script vapor> // ... </script> <template vapor> <!-- ... --> </template> vapor 属性を付ける <script setup vapor> の short-hand Templateにmarkerを付けて SFC全体をVapor compilation → Vapor Modeは、SFC単位で明示的にOpt-inする。3.6へアップグレードしただけでは有効にならない。
9. Pure Vapor Application — createVaporApp() import { createVaporApp } from 'vue' import App from './App.vue' Virtual DOM Runtime Codeをbundleに含めない。 → Baseline Bundle Sizeを大幅に削減できる。 createVaporApp(App).mount('#app') CHANGELOGでの前提 • Vapor Componentだけで構成されたApplicationで利用できる。 • Render FunctionやJSXで書かれたComponentはVDOM Componentのままであり、Vapor Applicationの中で使う 場合もInteropが必要。
10. VDOM Interop — vaporInteropPlugin VDOM App → Vapor createApp() で作成したVDOM AppからVapor Componentを使う場合、vaporInteropPluginをInstallす る。 import { createApp, vaporInteropPlugin } from 'vue' import App from './App.vue' createApp(App) .use(vaporInteropPlugin) .mount('#app') Vapor App → VDOM Vapor Appにも vaporInteropPlugin をInstallでき、中 でVDOM Componentを使える。 ただし VDOM Runtimeがbundleに含まれるため、Vapor によるBundle Size削減のメリットが相殺される。 Render Function / JSX で書かれたComponentもVDOM Component扱い。Vapor Appの中で使う場合はInteropが必要。
11. VDOM Interop Limitations — Mixed Nestingは避ける CHANGELOGでカバーされているもの Props ／ Events ／ Slots Vapor ComponentとNon-Vapor Componentを相互に Nestできる。 ただし • すべてのEdge Caseには対応していない • VDOMベースのComponent LibraryをVapor Modeで 使うと Rough Edges が残る可能性がある CHANGELOGの推奨：アプリ内でModeごとに明確な「Region」を分け、Mixed Nestingをできるだけ避 ける。 例：高頻度更新の画面だけをVaporのRegionにし、ナビゲーションや既存Component LibraryはVDOMのままにする。
12. Feature Compatibility — Unsupported / Not Applicable SupportedなSubsetについては、API 仕様に従った同じ振る舞いを目指す。 Feature Vapor Mode Options API Unsupported app.config.globalProperties Unsupported getCurrentInstance() null を返す @vue:xxx per-element lifecycle events Unsupported v-memo Unsupported Component Template Refs の $el / $props / $attrs / $slots / $refs 公開されない Custom Directives Vapor専用のInterface → VaporはVue 3の全機能をそのまま利用できるModeではない。移行検討時はまずこの表を確認する。
13. Event Delegation と stopPropagation() Important Usage Considerations（3.6.0-rc.1 時点の記述） 仕組み 注意点 • 対象のイベントを document へDelegation 上位階層で event.stopPropagation() を呼ぶと、Event が document まで到達しない。 • 各Elementが自身のHandlerを保持 • document のSingle ListenerがEvent Pathをたど り、該当Handlerを実行 → Delegated Handlerが実行されない場合がある。 Delegationを使わず、Elementへ直接Listenerをattachするケース <button @[event]="onClick" /> <button v-bind="{ onClick }" /> <button v-on="{ click: onClick }" /> rc.1時点：VaporのEvent Delegationは、VDOM ModeやNative DOMとは異なる振る舞いが発生する可能性がある。
14. slots.default() Is Not a Safe Dry Run Vaporでは slots.default?.() は 副作用が無い安全な Inspection API ではない。 呼び出すと起きること CHANGELOGの推奨 • SlotのRendering Logicが実行される SlotのRenderingはTemplateに任せる。 • BlocksやDOM Nodesを生成する可能性 • Reactive Effectsを登録する可能性 • Hydration時に既存SSR DOMをClaimする可能性 <template> <slot /> </template> 「Slotが存在するか確認するためのAPI」として扱わない。
15. Custom Directives — VDOMとは異なるInterface type VaporDirective = ( node: Element | VaporComponentInstance, value?: () => any, argument?: string, modifiers?: DirectiveModifiers, ) => (() => void) | void value Reactive Effect Cleanup Binding Valueを返す Reactive Getter として渡される。 watchEffect() で設定できる。 ComponentのUnmount時に自動で Releaseされる。 DirectiveからCleanup Functionを Returnすることもできる。 → VDOMの mounted / updated / unmounted を持つObjectとは別物。Directiveは個別の移行対象になる。
16. Behavior Consistency — VDOM Modeとの一致 Vapor Mode は VDOM Mode の振る舞いに可能な限り合わせることを目指す。 ただし CHANGELOG上の扱い VDOMとVaporは根本的に異なる Rendering Mode であ るため、Edge Caseでは Minor Inconsistency（軽微な不 整合） が残る可能性がある。 以前にDocumentedされていない Minor Inconsistency （軽微な不整合） は、原則としてBreaking Change(破壊的 変更) とはみなさない。 →「Vaporに移したら細かい挙動が違う」は起こり得る前提として読む。
17. 3.6.0-rc.2 — BREAKING CHANGES Features: compiler-vapor: make event delegation opt-in (#15127) Vapor event delegation is now opt-in Before（rc.1） After（rc.2〜） Supported Eventsを自動的に document へ Delegationしていた。 DOM Event Listenerは、デフォルトでElementへ直接 Attachされる。 Delegationを使いたい場合は Vapor専用の .delegate Modifier でOpt-in <button @click.delegate="onClick" /> compilerOptions.eventDelegation は削除 変更理由：Vapor Mode を Standard Vue / Native DOM の Event Behavior に合わせるため。
18. 3.6.0-rc.3 〜 rc.5 個々のBug Fixについては、今回の読み合わせでは扱わない。 rc.3 rc.4 rc.5 2026-08-11 2026-08-14 2026-08-21 Bug Fixes Hydration / KeepAlive / Slot / compiler-vapor まわりの修正が中 心。 Bug Fixes Fallthrough attrs、v-for、 Transition まわりの修正が中心。 Bug Fixes / Performance Fallthrough attrsの整合に加え、 TransitionGroup / v-for の Performance改善。 → RCとして、Bug Fixes / Performance Improvements を中心に修正が継続している。
19. まとめ — Vue 3.6.0-rc CHANGELOG Vapor Mode（rc.1） 制約とVDOMとの関係 • Vue SFC向けの新しいCompilation Mode • Options API / VNode依存Featureは非対応 • Bundle Size削減 / Performance改善 • Props・Events・SlotsはInterop可能 • 100% Opt-in、Vue APIのSubset • ただしMixed Nestingは避ける rc.2 Event DelegationがOpt-inへ。@click は Element へ直接Attach、Delegationは @click.delegate。 compilerOptions.eventDelegation は削除。 Vapor Modeは既存Vueの完全互換Modeではなく、明確なSubsetとして提供される。
20. Reference Vue.js Core CHANGELOG（minor branch） https://github.com/vuejs/core/blob/minor/CHANGELOG.md Release Notes：https://github.com/vuejs/core/releases 対象Version：3.6.0-rc.1 / rc.2 / rc.3 / rc.4 / rc.5（2026年8月23日時点） ご清聴ありがとうございました。