vue-skilld

vue 3.6.0-beta.17 (vuejs/core)

3.6 系列のプレリリースベータ版です。3.5 からの主な変更点は 2 つです。

• Vapor Mode：SFC のコンパイル時に Virtual DOM をスキップする、オプトイン方式のコンパイル戦略です。Vapor Mode を参照してください。
• alien-signals によるリアクティビティのリファクタリング：@vue/reactivity は、メモリ使用量の削減と更新の高速化を目的に、alien-signals を基盤として再構築されました。公開 API に変更はありません。

パッケージ情報（準備済みのソースから）：

• バージョン：package.json:3。
• メインエントリーは @vue/runtime-dom と @vue/runtime-vapor の両方を再エクスポートするため、すべての Vapor API（createVaporApp、vaporInteropPlugin、defineVaporComponent）は通常の vue からインポートできます：dist/vue.d.ts:4-5。
• vue パッケージ自体が追加する名前付きエクスポート：compile、defineVaporAsyncComponent、withAsyncContext：dist/vue.runtime.esm-bundler.js:12。
• サブパスのエクスポート：vue/server-renderer、vue/compiler-sfc、vue/jsx-runtime、vue/jsx：package.json:36-68。
• TypeScript はオプションのピア依存関係です（*）：package.json:107-113。

よくあるタスク

<script setup>、リアクティブな props の分割代入、defineModel を使ったコンポーネント：

<script setup lang="ts">
const { count = 0 } = defineProps<{ count?: number }>()
const model = defineModel<string>({ default: '' })
</script>

<template>
  <input v-model="model" />
  <p>{{ count }}</p>
</template>

テンプレート参照（3.5 以降のパターン）：

import { useTemplateRef } from 'vue'
const input = useTemplateRef('my-input') // matches ref="my-input" in template

クリーンアップ付きの watch（3.5 以降）：

import { watch, onWatcherCleanup } from 'vue'
watch(id, () => {
  const controller = new AbortController()
  load(id.value, controller)
  onWatcherCleanup(() => controller.abort())
})

値、ref、または getter を受け取るコンポーザブル：

import { toValue, type MaybeRefOrGetter } from 'vue'
function useDouble(source: MaybeRefOrGetter<number>) {
  return computed(() => toValue(source) * 2)
}

SSR の遅延ハイドレーション（3.5 以降）：

import { defineAsyncComponent, hydrateOnVisible } from 'vue'
const Heavy = defineAsyncComponent({
  loader: () => import('./Heavy.vue'),
  hydrate: hydrateOnVisible(),
})

記述内容に影響するバージョンごとのルール

引用付きの全一覧はAPI の変更点を参照してください。古いコードとの互換性を損なう変更は次のとおりです。

• Reactivity Transform（$ref、$computed）は 3.4 で削除されました。通常の ref／computed、または Vue Macros プラグインを使用してください。
• @vnodeXXX リスナーは 3.4 以降、コンパイラーエラーになります。@vue:mounted 形式のリスナーを使用してください。
• グローバルな JSX 名前空間は 3.4 以降、登録されなくなりました。tsconfig に jsxImportSource: "vue" を設定するか、vue/jsx をインポートしてください。
• Vapor コンポーネント（3.6）では、Options API、app.config.globalProperties、getCurrentInstance()、v-memo、@vue:xxx 要素ライフサイクルイベントは動作しません。
• Vapor のイベント委譲は beta.17 でデフォルトで有効です。祖先要素での stopPropagation() により、委譲されたハンドラーがキャンセルされる場合があります。ビルドごとに compilerOptions.eventDelegation で無効化できます（beta.15 で追加、#14924）。注：rc.2 では、これがオプトイン方式の .delegate 修飾子に置き換えられました（リリースノート）。

バンドラーと dist に関する注意事項

• バンドラーはランタイム専用ビルドを解決します。.vue ファイル内のテンプレートは事前にコンパイルされます。ランタイムでテンプレートをコンパイルする場合（DOM 内テンプレートまたはテンプレート文字列）は、vue を vue/dist/vue.esm-bundler.js にエイリアスしてください。
• 正しいツリーシェイキングのため、ビルド時に __VUE_OPTIONS_API__、__VUE_PROD_DEVTOOLS__、__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ を置き換えてください（コンパイル時フラグ）。
• Node CJS では、解決可能な場合、vue/compiler-sfc をインポートすると registerTS(() => require('typescript')) によって TypeScript が自動登録されます：compiler-sfc/register-ts.js:1-3。

詳細、dist ファイルの選択、エクスポート一覧については、API サーフェスを参照してください。

参考資料

• API サーフェス：エントリーポイント、dist ビルド、機能フラグ、エクスポート一覧。
• Vapor Mode：オプトイン、相互運用性、制約、ディレクティブ、イベント委譲。
• API の変更点 3.4 から 3.6：バージョンごとの新規、安定化、削除された API とその引用。
• ベストプラクティス：公式ドキュメントに照らして検証されたコンポーザブルとパフォーマンスのパターン。