# API設計書

## 概要

本ドキュメントは、Vue.js Core（vue/core）プロジェクトが提供するプログラマティックAPIの設計書である。Vue.jsはフロントエンドUIフレームワークであり、HTTPエンドポイントではなくライブラリとしてのAPIを公開する。本書では、各パッケージが提供するAPI関数・クラス・型・定数について、パラメータ仕様・戻り値・用途を網羅的に記載する。

## 共通仕様

### パッケージ構成

```
vue                     ← メインパッケージ（全APIを統合して再エクスポート）
├── @vue/reactivity     ← リアクティビティシステム
├── @vue/runtime-core   ← プラットフォーム非依存のランタイムコア
├── @vue/runtime-dom    ← DOM向けランタイム
├── @vue/compiler-core  ← プラットフォーム非依存のコンパイラコア
├── @vue/compiler-dom   ← DOM向けコンパイラ
├── @vue/compiler-sfc   ← SFC (.vue) コンパイラ
├── @vue/compiler-ssr   ← SSR向けコンパイラ
├── @vue/server-renderer← サーバーサイドレンダリング
└── @vue/shared         ← 共有ユーティリティ
```

### インポート方式

```typescript
// メインパッケージから一括インポート（推奨）
import { ref, reactive, computed, createApp } from 'vue'

// 個別パッケージからインポート（高度な用途）
import { compile } from '@vue/compiler-dom'
import { renderToString } from '@vue/server-renderer'
```

### TypeScript対応

全APIがTypeScriptの型定義を提供する。ジェネリクスを活用した型推論をサポートする。

## API一覧

| カテゴリ | API名 | パッケージ | 説明 |
| --- | --- | --- | --- |
| リアクティビティ - Ref | `ref` | @vue/reactivity | リアクティブなrefオブジェクトを作成 |
| リアクティビティ - Ref | `shallowRef` | @vue/reactivity | シャローなrefを作成 |
| リアクティビティ - Ref | `isRef` | @vue/reactivity | refかどうかを判定 |
| リアクティビティ - Ref | `unref` | @vue/reactivity | refから値を取り出す |
| リアクティビティ - Ref | `toValue` | @vue/reactivity | ref・getter・値を正規化 |
| リアクティビティ - Ref | `toRef` | @vue/reactivity | 値をrefに正規化 |
| リアクティビティ - Ref | `toRefs` | @vue/reactivity | リアクティブオブジェクトを各プロパティrefに変換 |
| リアクティビティ - Ref | `triggerRef` | @vue/reactivity | shallowRefのエフェクトを強制トリガー |
| リアクティビティ - Ref | `customRef` | @vue/reactivity | カスタムrefを作成 |
| リアクティビティ - Reactive | `reactive` | @vue/reactivity | 深いリアクティブプロキシを作成 |
| リアクティビティ - Reactive | `shallowReactive` | @vue/reactivity | シャローなリアクティブプロキシを作成 |
| リアクティビティ - Reactive | `readonly` | @vue/reactivity | 深い読み取り専用プロキシを作成 |
| リアクティビティ - Reactive | `shallowReadonly` | @vue/reactivity | シャローな読み取り専用プロキシを作成 |
| リアクティビティ - Reactive | `isReactive` | @vue/reactivity | リアクティブプロキシか判定 |
| リアクティビティ - Reactive | `isReadonly` | @vue/reactivity | readonlyプロキシか判定 |
| リアクティビティ - Reactive | `isShallow` | @vue/reactivity | シャロープロキシか判定 |
| リアクティビティ - Reactive | `isProxy` | @vue/reactivity | Vueプロキシか判定 |
| リアクティビティ - Reactive | `toRaw` | @vue/reactivity | 元の生オブジェクトを取得 |
| リアクティビティ - Reactive | `markRaw` | @vue/reactivity | プロキシ変換を禁止するマーク |
| リアクティビティ - Computed | `computed` | @vue/reactivity | 算出プロパティrefを作成 |
| リアクティビティ - Effect | `effect` | @vue/reactivity | リアクティブエフェクトを作成 |
| リアクティビティ - Effect | `stop` | @vue/reactivity | エフェクトを停止 |
| リアクティビティ - Effect | `onEffectCleanup` | @vue/reactivity | エフェクトクリーンアップを登録 |
| リアクティビティ - Effect | `effectScope` | @vue/reactivity | エフェクトスコープを作成 |
| リアクティビティ - Effect | `getCurrentScope` | @vue/reactivity | 現在のエフェクトスコープを取得 |
| リアクティビティ - Effect | `onScopeDispose` | @vue/reactivity | スコープ破棄コールバックを登録 |
| リアクティビティ - Watch | `watch` | @vue/reactivity | データソースを監視 |
| リアクティビティ - Watch | `getCurrentWatcher` | @vue/reactivity | 現在のウォッチャーを取得 |
| リアクティビティ - Watch | `onWatcherCleanup` | @vue/reactivity | ウォッチャークリーンアップを登録 |
| リアクティビティ - トラッキング | `track` | @vue/reactivity | リアクティブ依存をトラッキング |
| リアクティビティ - トラッキング | `trigger` | @vue/reactivity | エフェクトをトリガー |
| リアクティビティ - トラッキング | `pauseTracking` | @vue/reactivity | トラッキングを一時停止 |
| リアクティビティ - トラッキング | `enableTracking` | @vue/reactivity | トラッキングを再有効化 |
| リアクティビティ - トラッキング | `resetTracking` | @vue/reactivity | トラッキング状態をリセット |
| ランタイム - アプリ | `createApp` | @vue/runtime-dom | Vueアプリケーションインスタンスを生成 |
| ランタイム - アプリ | `createSSRApp` | @vue/runtime-dom | SSR対応アプリインスタンスを生成 |
| ランタイム - レンダリング | `render` | @vue/runtime-dom | VNodeをDOMにマウント |
| ランタイム - レンダリング | `hydrate` | @vue/runtime-dom | SSR済みHTMLをハイドレート |
| ランタイム - レンダリング | `h` | @vue/runtime-core | VNodeを生成 |
| ランタイム - レンダリング | `createVNode` | @vue/runtime-core | VNodeを低レベル生成 |
| ランタイム - レンダリング | `cloneVNode` | @vue/runtime-core | VNodeをクローン |
| ランタイム - レンダリング | `mergeProps` | @vue/runtime-core | propsをマージ |
| ランタイム - レンダリング | `isVNode` | @vue/runtime-core | VNode判定 |
| ランタイム - レンダリング | `nextTick` | @vue/runtime-core | 次のDOM更新後に実行 |
| ランタイム - コンポーネント | `defineComponent` | @vue/runtime-core | コンポーネントを定義（型推論付き） |
| ランタイム - コンポーネント | `defineAsyncComponent` | @vue/runtime-core | 非同期コンポーネントを定義 |
| ランタイム - コンポーネント | `getCurrentInstance` | @vue/runtime-core | 現在のコンポーネントインスタンスを取得 |
| ランタイム - script setup | `defineProps` | @vue/runtime-core | props宣言（コンパイラマクロ） |
| ランタイム - script setup | `defineEmits` | @vue/runtime-core | emits宣言（コンパイラマクロ） |
| ランタイム - script setup | `defineExpose` | @vue/runtime-core | 公開プロパティ宣言（コンパイラマクロ） |
| ランタイム - script setup | `defineOptions` | @vue/runtime-core | 追加オプション宣言（コンパイラマクロ） |
| ランタイム - script setup | `defineSlots` | @vue/runtime-core | スロット宣言（コンパイラマクロ） |
| ランタイム - script setup | `defineModel` | @vue/runtime-core | v-model双方向バインディング宣言 |
| ランタイム - script setup | `withDefaults` | @vue/runtime-core | definePropsのデフォルト値設定 |
| ランタイム - script setup | `useSlots` | @vue/runtime-core | スロットオブジェクト取得 |
| ランタイム - script setup | `useAttrs` | @vue/runtime-core | フォールスルー属性取得 |
| ランタイム - Composition | `provide` | @vue/runtime-core | 子孫に値を提供 |
| ランタイム - Composition | `inject` | @vue/runtime-core | 祖先から値を取得 |
| ランタイム - Composition | `hasInjectionContext` | @vue/runtime-core | inject可能なコンテキストか判定 |
| ランタイム - Composition | `useModel` | @vue/runtime-core | v-model双方向バインディングref |
| ランタイム - Composition | `useTemplateRef` | @vue/runtime-core | テンプレート参照ref取得 |
| ランタイム - Composition | `useId` | @vue/runtime-core | 一意なID生成 |
| ランタイム - ライフサイクル | `onBeforeMount` | @vue/runtime-core | マウント前フック |
| ランタイム - ライフサイクル | `onMounted` | @vue/runtime-core | マウント後フック |
| ランタイム - ライフサイクル | `onBeforeUpdate` | @vue/runtime-core | 更新前フック |
| ランタイム - ライフサイクル | `onUpdated` | @vue/runtime-core | 更新後フック |
| ランタイム - ライフサイクル | `onBeforeUnmount` | @vue/runtime-core | アンマウント前フック |
| ランタイム - ライフサイクル | `onUnmounted` | @vue/runtime-core | アンマウント後フック |
| ランタイム - ライフサイクル | `onActivated` | @vue/runtime-core | KeepAlive活性化フック |
| ランタイム - ライフサイクル | `onDeactivated` | @vue/runtime-core | KeepAlive非活性化フック |
| ランタイム - ライフサイクル | `onErrorCaptured` | @vue/runtime-core | エラーキャプチャフック |
| ランタイム - ライフサイクル | `onRenderTracked` | @vue/runtime-core | 依存追跡フック（dev） |
| ランタイム - ライフサイクル | `onRenderTriggered` | @vue/runtime-core | レンダートリガーフック（dev） |
| ランタイム - ライフサイクル | `onServerPrefetch` | @vue/runtime-core | SSRプリフェッチフック |
| ランタイム - Watch | `watchEffect` | @vue/runtime-core | リアクティブエフェクト監視 |
| ランタイム - Watch | `watchPostEffect` | @vue/runtime-core | コンポーネント更新後エフェクト |
| ランタイム - Watch | `watchSyncEffect` | @vue/runtime-core | 同期エフェクト |
| ランタイム - Hydration | `hydrateOnIdle` | @vue/runtime-core | アイドル時ハイドレーション戦略 |
| ランタイム - Hydration | `hydrateOnVisible` | @vue/runtime-core | 表示時ハイドレーション戦略 |
| ランタイム - Hydration | `hydrateOnMediaQuery` | @vue/runtime-core | メディアクエリマッチ時ハイドレーション |
| ランタイム - Hydration | `hydrateOnInteraction` | @vue/runtime-core | インタラクション時ハイドレーション |
| ランタイム - カスタムレンダラー | `createRenderer` | @vue/runtime-core | カスタムレンダラーを作成 |
| ランタイム - カスタムレンダラー | `createHydrationRenderer` | @vue/runtime-core | ハイドレーション対応レンダラーを作成 |
| ランタイム - ディレクティブ | `withDirectives` | @vue/runtime-core | VNodeにディレクティブ適用 |
| ランタイム - ディレクティブ | `resolveComponent` | @vue/runtime-core | コンポーネント名前解決 |
| ランタイム - ディレクティブ | `resolveDirective` | @vue/runtime-core | ディレクティブ名前解決 |
| ランタイム - ディレクティブ | `resolveDynamicComponent` | @vue/runtime-core | 動的コンポーネント解決 |
| DOM - コンポーネント | `Transition` | @vue/runtime-dom | CSSトランジションコンポーネント |
| DOM - コンポーネント | `TransitionGroup` | @vue/runtime-dom | リストトランジションコンポーネント |
| DOM - ディレクティブ | `vShow` | @vue/runtime-dom | v-showディレクティブ |
| DOM - ディレクティブ | `vModelText` | @vue/runtime-dom | input/textarea用v-model |
| DOM - ディレクティブ | `vModelCheckbox` | @vue/runtime-dom | checkbox用v-model |
| DOM - ディレクティブ | `vModelRadio` | @vue/runtime-dom | radio用v-model |
| DOM - ディレクティブ | `vModelSelect` | @vue/runtime-dom | select用v-model |
| DOM - ディレクティブ | `vModelDynamic` | @vue/runtime-dom | 動的type判定v-model |
| DOM - イベント | `withModifiers` | @vue/runtime-dom | v-onイベントModifier適用 |
| DOM - イベント | `withKeys` | @vue/runtime-dom | キーModifierフィルタ |
| DOM - カスタム要素 | `defineCustomElement` | @vue/runtime-dom | Web Custom Element定義 |
| DOM - カスタム要素 | `defineSSRCustomElement` | @vue/runtime-dom | SSR対応カスタム要素定義 |
| DOM - カスタム要素 | `VueElement` | @vue/runtime-dom | カスタム要素基底クラス |
| DOM - カスタム要素 | `useHost` | @vue/runtime-dom | ホストVueElement取得 |
| DOM - カスタム要素 | `useShadowRoot` | @vue/runtime-dom | Shadow Root取得 |
| DOM - CSS | `useCssModule` | @vue/runtime-dom | CSSモジュールマッピング取得 |
| DOM - CSS | `useCssVars` | @vue/runtime-dom | CSS変数インジェクション |
| コンパイラ | `compile` (DOM) | @vue/compiler-dom | DOM向けテンプレートコンパイル |
| コンパイラ | `parse` (DOM) | @vue/compiler-dom | DOM向けテンプレートパース |
| コンパイラ | `baseCompile` | @vue/compiler-core | プラットフォーム非依存コンパイル |
| コンパイラ | `baseParse` | @vue/compiler-core | プラットフォーム非依存パース |
| コンパイラ | `transform` | @vue/compiler-core | AST変換 |
| コンパイラ | `generate` | @vue/compiler-core | コード生成 |
| SFC | `parse` (SFC) | @vue/compiler-sfc | .vueファイルパース |
| SFC | `compileScript` | @vue/compiler-sfc | script/script setupコンパイル |
| SFC | `compileTemplate` | @vue/compiler-sfc | templateブロックコンパイル |
| SFC | `compileStyle` | @vue/compiler-sfc | styleブロックコンパイル（同期） |
| SFC | `compileStyleAsync` | @vue/compiler-sfc | styleブロックコンパイル（非同期） |
| SSR コンパイラ | `compile` (SSR) | @vue/compiler-ssr | SSR向けテンプレートコンパイル |
| SSR レンダラー | `renderToString` | @vue/server-renderer | HTML文字列にレンダリング |
| SSR レンダラー | `renderToNodeStream` | @vue/server-renderer | Node.js Readableストリーム生成 |
| SSR レンダラー | `pipeToNodeWritable` | @vue/server-renderer | Node.js Writableにパイプ |
| SSR レンダラー | `renderToWebStream` | @vue/server-renderer | Web ReadableStream生成 |
| SSR レンダラー | `pipeToWebWritable` | @vue/server-renderer | Web WritableStreamにパイプ |
| SSR レンダラー | `renderToSimpleStream` | @vue/server-renderer | カスタムストリームにレンダリング |

## 各APIエンドポイント定義

### リアクティビティ - Ref

#### 1 ref

リアクティブかつミュータブルなrefオブジェクトを作成する。`.value`プロパティを通じて内部値にアクセスする。オブジェクト値は`reactive()`で深くリアクティブ化される。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| value | `T` | - | refでラップする内部値 |

**戻り値**

`Ref<UnwrapRef<T>>`

```typescript
const count = ref(0)
count.value++ // 1

const obj = ref({ name: 'Vue' })
obj.value.name // リアクティブにアクセス可能
```

---

#### 2 shallowRef

`ref`のシャロー版。`.value`自体の置き換えのみをトラッキングし、内部プロパティの変更はトラッキングしない。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| value | `T` | - | シャローrefの内部値 |

**戻り値**

`ShallowRef<T>`

---

#### 3 isRef

値がrefオブジェクトかどうかを判定する型ガード関数。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| r | `Ref<T> \| unknown` | ○ | 検査する値 |

**戻り値**

`boolean` (型ガード: `r is Ref<T>`)

---

#### 4 unref

引数がrefならその`.value`を、それ以外はそのまま返すシュガー関数。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| ref | `MaybeRef<T> \| ComputedRef<T>` | ○ | refまたは通常の値 |

**戻り値**

`T`

---

#### 5 toValue

値・ref・getter関数を通常の値に正規化する。`unref`と異なりgetter関数も呼び出す。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| source | `MaybeRefOrGetter<T>` | ○ | getter関数、ref、または通常値 |

**戻り値**

`T`

---

#### 6 toRef

値・ref・getter・オブジェクトプロパティをrefに正規化する。オブジェクトとキーを渡した場合はソースプロパティと双方向同期するrefを返す。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ（オーバーロード1: 値からref作成）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| value | `T` | ○ | getter、ref、または通常値 |

**パラメータ（オーバーロード2: オブジェクトプロパティref）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| object | `T extends object` | ○ | リアクティブオブジェクト |
| key | `K extends keyof T` | ○ | プロパティ名 |
| defaultValue | `T[K]` | - | undefinedの場合のデフォルト値 |

**戻り値**

`Ref`

---

#### 7 toRefs

リアクティブオブジェクトの各プロパティが元のプロパティを参照するrefである通常のオブジェクトに変換する。分割代入のリアクティビティ保持に使用する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| object | `T extends object` | ○ | リアクティブオブジェクト |

**戻り値**

`ToRefs<T>` — 各プロパティが`ToRef<T[K]>`のオブジェクト

---

#### 8 triggerRef

shallowRefに依存するエフェクトを強制的にトリガーする。shallowRefの内部値に深い変更を加えた後に使用する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| ref | `Ref` | ○ | トリガー対象のshallowRef |

**戻り値**

`void`

---

#### 9 customRef

依存追跡と更新トリガーを明示的に制御するカスタムrefを作成する。デバウンスなど独自のリアクティビティ制御に使用する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/ref.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| factory | `CustomRefFactory<T>` | ○ | `(track, trigger) => { get, set }`形式のファクトリ関数 |

**戻り値**

`Ref<T>`

```typescript
function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => ({
    get() { track(); return value },
    set(newValue) {
      clearTimeout(timeout)
      timeout = setTimeout(() => { value = newValue; trigger() }, delay)
    }
  }))
}
```

---

### リアクティビティ - Reactive

#### 10 reactive

オブジェクトのリアクティブプロキシを返す。深い変換でネストされたrefも自動的にアンラップする。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/reactive.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| target | `T extends object` | ○ | リアクティブにするソースオブジェクト |

**戻り値**

`Reactive<T>`（= `UnwrapNestedRefs<T>`）

---

#### 11 shallowReactive

`reactive`のシャロー版。ルートレベルのプロパティのみリアクティブ。ネストされたオブジェクトは変換されない。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/reactive.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| target | `T extends object` | ○ | ソースオブジェクト |

**戻り値**

`ShallowReactive<T>`

---

#### 12 readonly

オブジェクトの深い読み取り専用プロキシを返す。ネストされたプロパティもすべてreadonly。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/reactive.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| target | `T extends object` | ○ | ソースオブジェクト |

**戻り値**

`DeepReadonly<UnwrapNestedRefs<T>>`

---

#### 13 shallowReadonly

`readonly`のシャロー版。ルートレベルのプロパティのみreadonly。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/reactive.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| target | `T extends object` | ○ | ソースオブジェクト |

**戻り値**

`Readonly<T>`

---

#### 14 isReactive / isReadonly / isShallow / isProxy

リアクティブオブジェクトの状態を判定するユーティリティ関数群。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/reactive.ts` |

**パラメータ（共通）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| value | `unknown` | ○ | 確認する値 |

**戻り値**

`boolean`

---

#### 15 toRaw

Vueが作成したプロキシの元の生オブジェクトを返す。プロキシアクセス/トラッキングなしで一時的に読み書きするためのエスケープハッチ。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/reactive.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| observed | `T` | ○ | プロキシオブジェクト |

**戻り値**

`T`（生の元オブジェクト）

---

#### 16 markRaw

オブジェクトをプロキシに変換されないようにマークする。`reactive()`で包んでも変換されない。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/reactive.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| value | `T extends object` | ○ | rawとしてマークするオブジェクト |

**戻り値**

`Raw<T>`（元のオブジェクト）

---

### リアクティビティ - Computed

#### 17 computed

getter関数から読み取り専用リアクティブrefを、またはget/setオプションから書き込み可能refを作成する。依存する値が変化したときのみ再評価するキャッシュ機能付き。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/computed.ts` |

**パラメータ（読み取り専用）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| getter | `ComputedGetter<T>` | ○ | getter関数 |
| debugOptions | `DebuggerOptions` | - | デバッグ用onTrack/onTriggerフック |

**パラメータ（書き込み可能）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| options | `WritableComputedOptions<T, S>` | ○ | `{ get, set }`オプション |
| debugOptions | `DebuggerOptions` | - | デバッグ用フック |

**戻り値**

`ComputedRef<T>` または `WritableComputedRef<T, S>`

---

### リアクティビティ - Effect

#### 18 effect

リアクティブエフェクトを作成して実行する。依存するリアクティブな値が変化すると自動的に再実行される。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/effect.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| fn | `() => T` | ○ | 実行するエフェクト関数 |
| options | `ReactiveEffectOptions` | - | scheduler、allowRecurse、onStop等 |

**戻り値**

`ReactiveEffectRunner<T>` — `.effect`プロパティ付きの呼び出し可能関数

---

#### 19 stop

エフェクトを停止してトラッキングを解除する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/effect.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| runner | `ReactiveEffectRunner` | ○ | 停止するエフェクトのrunner |

**戻り値**

`void`

---

#### 20 effectScope

リアクティブエフェクトをキャプチャするスコープを作成する。まとめて破棄できる。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/effectScope.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| detached | `boolean` | - | trueで親スコープから独立 |

**戻り値**

`EffectScope` — `run(fn)`, `stop()`, `pause()`, `resume()`メソッドを持つ

---

#### 21 getCurrentScope / onScopeDispose

`getCurrentScope`は現在アクティブなエフェクトスコープを返す。`onScopeDispose`はスコープ破棄時のコールバックを登録する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/effectScope.ts` |

---

### リアクティビティ - Watch

#### 22 watch（@vue/reactivity版）

ウォッチャーを作成する。コールバック付きの場合は値変化を監視、コールバックなしではwatchEffectとして動作する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/reactivity` |
| ソース | `packages/reactivity/src/watch.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| source | `WatchSource \| WatchSource[] \| WatchEffect \| object` | ○ | 監視ソース（ref、reactive、getter、配列） |
| cb | `WatchCallback \| null` | - | ソース変化時のコールバック |
| options | `WatchOptions` | - | immediate、deep、once、scheduler等 |

**戻り値**

`WatchHandle` — `stop()`, `pause()`, `resume()`メソッドを持つ

---

### ランタイム - アプリケーション

#### 23 createApp

クライアントサイドマウント用のVueアプリケーションインスタンスを生成する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| rootComponent | `Component` | ○ | ルートコンポーネント定義 |
| rootProps | `Record<string, any>` | - | ルートコンポーネントに渡すprops |

**戻り値**

`App<Element>` — `mount()`, `unmount()`, `use()`, `component()`, `directive()`, `provide()`等のメソッドを持つ

```typescript
const app = createApp(App)
app.mount('#app')
```

---

#### 24 createSSRApp

SSRハイドレーション用のVueアプリケーションインスタンスを生成する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| rootComponent | `Component` | ○ | ルートコンポーネント定義 |
| rootProps | `Record<string, any>` | - | ルートコンポーネントに渡すprops |

**戻り値**

`App<Element>`（ハイドレーション対応）

---

### ランタイム - レンダリング

#### 25 h

仮想DOMノード（VNode）を生成する。多数のオーバーロードを持つ。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/h.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| type | `string \| Component \| typeof Fragment \| typeof Teleport \| typeof Suspense` | ○ | HTMLタグ名、コンポーネント、特殊シンボル |
| props | `RawProps \| null` | - | propsオブジェクト |
| children | `RawChildren \| RawSlots` | - | 文字列、VNode、配列、スロットオブジェクト |

**戻り値**

`VNode`

```typescript
h('div', { class: 'container' }, [
  h('h1', 'Hello'),
  h(MyComponent, { msg: 'world' })
])
```

---

#### 26 nextTick

DOMの次の更新サイクル完了後に処理を実行する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/scheduler.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| fn | `(this: T) => R \| Promise<R>` | - | 次のDOM更新後に実行する関数 |

**戻り値**

`Promise<void | R>`

---

### ランタイム - コンポーネント定義

#### 27 defineComponent

型推論のためのコンポーネント定義ユーティリティ。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiDefineComponent.ts` |

**パラメータ（setup関数版）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| setup | `(props, ctx) => RenderFunction` | ○ | setup関数 |
| options | `{ name?, inheritAttrs?, props?, emits?, slots? }` | - | 追加オプション |

**パラメータ（オプションオブジェクト版）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| options | `ComponentOptionsBase` | ○ | data, computed, methods, setup等を含む完全なオプション |

**戻り値**

`DefineComponent<...>`

---

#### 28 defineAsyncComponent

非同期コンポーネントを定義する。ローディング状態・エラー状態・タイムアウトをサポートする。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiAsyncComponent.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| source | `AsyncComponentLoader<T> \| AsyncComponentOptions<T>` | ○ | ローダー関数またはオプションオブジェクト |

**AsyncComponentOptions**

| フィールド名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| loader | `() => Promise<Component>` | ○ | コンポーネントローダー |
| loadingComponent | `Component` | - | ロード中コンポーネント |
| errorComponent | `Component` | - | エラー時コンポーネント |
| delay | `number` | - | ローディング表示遅延（デフォルト: 200ms） |
| timeout | `number` | - | タイムアウト |
| suspensible | `boolean` | - | Suspense対応（デフォルト: true） |
| onError | `(error, retry, fail, attempts) => any` | - | エラーハンドラ |

**戻り値**

`Component`

---

### ランタイム - `<script setup>` コンパイラマクロ

#### 29 defineProps

コンポーネントのpropsを宣言する。`<script setup>`内でのみ有効なコンパイラマクロ。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiSetupHelpers.ts` |

**パラメータ（3つのオーバーロード）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| props | `PropNames[]` | - | 配列形式のprop名 |
| props | `ComponentObjectPropsOptions` | - | オブジェクト形式のprop定義 |
| *（型パラメータ）* | `<T>` | - | 型ベース形式（引数なし） |

**戻り値**

`Readonly<Props>`

---

#### 30 defineEmits

コンポーネントが発行するイベントを宣言する。`<script setup>`内でのみ有効。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiSetupHelpers.ts` |

**戻り値**

`EmitFn<E>`

---

#### 31 defineExpose

`<script setup>`コンポーネントで外部に公開するプロパティを宣言する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiSetupHelpers.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| exposed | `Record<string, any>` | - | 公開するプロパティ |

**戻り値**

`void`

---

#### 32 defineModel

`v-model`で親から受け取る双方向バインディングpropsを宣言する。対応する`update:propName`イベントも自動宣言される。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiSetupHelpers.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| name | `string` | - | prop名（デフォルト: 'modelValue'） |
| options | `PropOptions<T> & DefineModelOptions<T, G, S>` | - | prop設定とget/set変換 |

**戻り値**

`ModelRef<T, M, G, S>` — Refに似た双方向バインディング

---

#### 33 withDefaults

型ベース`defineProps`に対してデフォルト値を設定する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiSetupHelpers.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| props | `DefineProps<T, BKeys>` | ○ | defineProps()の結果 |
| defaults | `Defaults` | ○ | 各propのデフォルト値 |

**戻り値**

`PropsWithDefaults<T, Defaults, BKeys>`

---

### ランタイム - Composition API

#### 34 provide / inject

祖先コンポーネントから子孫への依存性注入を実現する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiInject.ts` |

**provide パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| key | `InjectionKey<T> \| string \| number` | ○ | インジェクションキー |
| value | `T` | ○ | 提供する値 |

**inject パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| key | `InjectionKey<T> \| string` | ○ | インジェクションキー |
| defaultValue | `T \| (() => T)` | - | デフォルト値またはファクトリ |
| treatDefaultAsFactory | `boolean` | - | デフォルト値をファクトリとして扱うか |

---

#### 35 useTemplateRef

テンプレート参照（`ref`属性）に対応する読み取り専用のshallow refを返す。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/helpers/useTemplateRef.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| key | `string` | ○ | テンプレート内のref属性値 |

**戻り値**

`Readonly<ShallowRef<T | null>>`

---

#### 36 useId

アプリ内で一意かつ安定したIDを生成する。SSRとCSRの間でハイドレーションが一致する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/helpers/useId.ts` |

**パラメータ**

なし

**戻り値**

`string` — 形式: `v-{instanceId}{counter}`

---

### ランタイム - ライフサイクルフック

#### 37 onBeforeMount / onMounted / onBeforeUpdate / onUpdated / onBeforeUnmount / onUnmounted

コンポーネントのライフサイクルにフックする関数群。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiLifecycle.ts` |

**パラメータ（共通）**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| hook | `() => void` | ○ | ライフサイクルコールバック |
| target | `ComponentInternalInstance \| null` | - | ターゲットインスタンス |

**戻り値**

`void`

| フック名 | タイミング |
| --- | --- |
| `onBeforeMount` | DOMに挿入される直前 |
| `onMounted` | DOMに挿入された直後 |
| `onBeforeUpdate` | 再レンダリング直前 |
| `onUpdated` | 再レンダリング完了後 |
| `onBeforeUnmount` | DOM削除直前 |
| `onUnmounted` | 完全に削除された後 |
| `onActivated` | KeepAlive再挿入時 |
| `onDeactivated` | KeepAliveキャッシュ時 |
| `onServerPrefetch` | SSRレンダリング前 |

---

#### 38 onErrorCaptured

子コンポーネントツリーでエラーが発生したとき呼ばれる。`false`を返すとエラーの伝播を止める。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiLifecycle.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| hook | `(err: TError, instance: ComponentPublicInstance \| null, info: string) => boolean \| void` | ○ | エラーハンドラ |

**戻り値**

`void`

---

### ランタイム - Watch（runtime-core版）

#### 39 watch（runtime-core版）

データソースを監視し変化時にコールバックを実行する。flushタイミング制御をサポート。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiWatch.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| source | `WatchSource<T> \| WatchSource[]` | ○ | 監視ソース |
| cb | `WatchCallback<T, OldT>` | ○ | `(newValue, oldValue, onCleanup) => void` |
| options | `WatchOptions` | - | 下記参照 |

**WatchOptions**

| フィールド名 | 型 | デフォルト | 説明 |
| --- | --- | --- | --- |
| immediate | `boolean` | `false` | 即座に実行 |
| deep | `boolean \| number` | `false` | 深い監視 |
| once | `boolean` | `false` | 一度のみ実行 |
| flush | `'pre' \| 'post' \| 'sync'` | `'pre'` | 実行タイミング |

**戻り値**

`WatchHandle`

---

#### 40 watchEffect / watchPostEffect / watchSyncEffect

エフェクト関数内で参照されたリアクティブ依存を追跡し、変化時に再実行する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/apiWatch.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| effect | `(onCleanup) => void` | ○ | エフェクト関数 |
| options | `WatchEffectOptions` | - | flush、onTrack、onTrigger |

| 関数名 | flushデフォルト |
| --- | --- |
| `watchEffect` | `'pre'` |
| `watchPostEffect` | `'post'`（コンポーネント更新後） |
| `watchSyncEffect` | `'sync'`（同期即時） |

**戻り値**

`WatchHandle`

---

### ランタイム - Lazy Hydration戦略

#### 41 hydrateOnIdle / hydrateOnVisible / hydrateOnMediaQuery / hydrateOnInteraction

SSRハイドレーションのタイミングを制御する戦略関数群。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/hydrationStrategies.ts` |

| 関数名 | パラメータ | 説明 |
| --- | --- | --- |
| `hydrateOnIdle` | `timeout?: number` (デフォルト: 10000) | アイドル時にハイドレート |
| `hydrateOnVisible` | `options?: IntersectionObserverInit` | ビューポート表示時にハイドレート |
| `hydrateOnMediaQuery` | `query: string` | メディアクエリマッチ時にハイドレート |
| `hydrateOnInteraction` | `interactions?: string \| string[]` | ユーザー操作時にハイドレート |

**戻り値（共通）**

`HydrationStrategy`

---

### ランタイム - カスタムレンダラー

#### 42 createRenderer / createHydrationRenderer

DOM以外の環境（Canvas、WebGL、Native等）向けのカスタムレンダラーを作成する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-core` |
| ソース | `packages/runtime-core/src/renderer.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| options | `RendererOptions<HostNode, HostElement>` | ○ | DOM操作を抽象化したオプション（insert, remove, createElement等） |

**戻り値**

- `createRenderer`: `Renderer<HostElement>` — `{ render, createApp }`
- `createHydrationRenderer`: `HydrationRenderer` — `{ render, createApp, hydrate }`

---

### DOM - 組み込みコンポーネント

#### 43 Transition

CSSトランジション/アニメーションをサポートするDOM専用コンポーネント。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/components/Transition.ts` |

**Props（TransitionProps）**

| プロパティ名 | 型 | 必須 | デフォルト | 説明 |
| --- | --- | --- | --- | --- |
| name | `string` | - | `'v'` | CSSクラスのプレフィックス |
| type | `'transition' \| 'animation'` | - | - | 優先するアニメーション種別 |
| css | `boolean` | - | `true` | CSSトランジションの有効/無効 |
| duration | `number \| { enter: number; leave: number }` | - | - | 明示的なトランジション時間(ms) |
| mode | `'in-out' \| 'out-in' \| 'default'` | - | - | トランジションモード |
| appear | `boolean` | - | - | 初回マウント時もトランジション実行 |
| enterFromClass | `string` | - | `${name}-enter-from` | enter開始クラス |
| enterActiveClass | `string` | - | `${name}-enter-active` | enterアクティブクラス |
| enterToClass | `string` | - | `${name}-enter-to` | enter終了クラス |
| leaveFromClass | `string` | - | `${name}-leave-from` | leave開始クラス |
| leaveActiveClass | `string` | - | `${name}-leave-active` | leaveアクティブクラス |
| leaveToClass | `string` | - | `${name}-leave-to` | leave終了クラス |

---

#### 44 TransitionGroup

リストアイテムのトランジションを処理するコンポーネント。FLIPアニメーションをサポートする。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/components/TransitionGroup.ts` |

**Props（TransitionGroupProps）**

| プロパティ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| tag | `string` | - | ラッパー要素のタグ名（省略時はFragment） |
| moveClass | `string` | - | 移動トランジション用のCSSクラス名 |
| *（TransitionPropsの全プロパティ、modeを除く）* | | | |

---

### DOM - ビルトインディレクティブ

#### 45 vShow

要素の`display`スタイルを切り替えて表示/非表示を制御する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/directives/vShow.ts` |
| バインディング値 | `boolean` — trueで表示、falseで非表示 |

---

#### 46 vModelText / vModelCheckbox / vModelRadio / vModelSelect / vModelDynamic

各フォーム要素用の`v-model`ディレクティブ実装。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/directives/vModel.ts` |

| ディレクティブ | 対象要素 | Modifier |
| --- | --- | --- |
| `vModelText` | `<input>`, `<textarea>` | `trim`, `number`, `lazy` |
| `vModelCheckbox` | `<input type="checkbox">` | — |
| `vModelRadio` | `<input type="radio">` | — |
| `vModelSelect` | `<select>` | `number` |
| `vModelDynamic` | 動的type判定 | — |

---

### DOM - イベントModifier

#### 47 withModifiers

`v-on`のイベントModifierを処理するラッパー関数。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/directives/vOn.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| fn | `(event: Event, ...args: unknown[]) => any` | ○ | イベントハンドラー |
| modifiers | `VOnModifiers[]` | ○ | 適用するModifierの配列 |

**サポートModifier**: `stop`, `prevent`, `self`, `ctrl`, `shift`, `alt`, `meta`, `left`, `middle`, `right`, `exact`

**戻り値**

ラップ済みハンドラー（元と同じ型`T`）

---

#### 48 withKeys

キーボードイベントにキーModifierフィルタを適用するラッパー関数。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/directives/vOn.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| fn | `(event: KeyboardEvent) => any` | ○ | キーボードイベントハンドラー |
| modifiers | `string[]` | ○ | キー名のModifier配列（例: `['enter', 'esc']`） |

**戻り値**

フィルタリング済みハンドラー

---

### DOM - カスタム要素

#### 49 defineCustomElement

VueコンポーネントをWeb Custom Element（HTMLElementのサブクラス）として定義する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/apiCustomElement.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| options | `ComponentOptions \| setup関数` | ○ | コンポーネント定義 |
| extraOptions | `CustomElementOptions` | - | styles, shadowRoot, nonce, configureApp等 |

**CustomElementOptions**

| フィールド名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| styles | `string[]` | - | Shadow DOMに注入するCSS |
| shadowRoot | `boolean` | - | Shadow DOM使用有無（デフォルト: true） |
| nonce | `string` | - | CSP nonce値 |
| configureApp | `(app: App) => void` | - | Vueアプリ設定コールバック |

**戻り値**

`VueElementConstructor<Props>` — `customElements.define()`で登録可能

---

#### 50 useHost / useShadowRoot

カスタム要素の`setup()`内からホストVueElementまたはShadow Rootを取得する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/apiCustomElement.ts` |

| 関数名 | 戻り値 |
| --- | --- |
| `useHost()` | `VueElement \| null` |
| `useShadowRoot()` | `ShadowRoot \| null` |

---

### DOM - CSSユーティリティ

#### 51 useCssModule

SFCの`<style module>`で定義されたCSSモジュールのクラス名マッピングを取得する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/runtime-dom` |
| ソース | `packages/runtime-dom/src/helpers/useCssModule.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | デフォルト | 説明 |
| --- | --- | --- | --- | --- |
| name | `string` | - | `'$style'` | モジュール名 |

**戻り値**

`Record<string, string>`

---

### コンパイラ - compiler-core

#### 52 baseCompile

テンプレート文字列をレンダー関数コードへコンパイルするプラットフォーム非依存の基盤実装。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-core` |
| ソース | `packages/compiler-core/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| source | `string \| RootNode` | ○ | テンプレート文字列または既存AST |
| options | `CompilerOptions` | - | コンパイラオプション |

**戻り値**

`CodegenResult` — `{ code, preamble, ast, map? }`

---

#### 53 baseParse

Vueテンプレート文字列をAST（RootNode）に変換する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-core` |
| ソース | `packages/compiler-core/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| template | `string` | ○ | テンプレート文字列 |
| options | `ParserOptions` | - | パーサーオプション |

**戻り値**

`RootNode`

---

#### 54 transform

ASTに対してノード変換・ディレクティブ変換を適用する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-core` |
| ソース | `packages/compiler-core/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| root | `RootNode` | ○ | 変換対象のAST |
| options | `TransformOptions` | ○ | 変換オプション |

**戻り値**

`void`（AST inplace変更）

---

#### 55 generate

変換済みASTからレンダー関数のコード文字列を生成する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-core` |
| ソース | `packages/compiler-core/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| ast | `RootNode` | ○ | 変換済みAST |
| options | `CodegenOptions` | - | コード生成オプション |

**戻り値**

`CodegenResult` — `{ code, preamble, ast, map? }`

---

### コンパイラ - compiler-dom

#### 56 compile（DOM版）

DOM環境向けにテンプレートをコンパイルする。DOM固有のトランスフォームをデフォルトで適用する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-dom` |
| ソース | `packages/compiler-dom/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| src | `string \| RootNode` | ○ | テンプレート文字列または既存AST |
| options | `CompilerOptions` | - | コンパイラオプション |

**戻り値**

`CodegenResult`

---

### コンパイラ - compiler-sfc

#### 57 parse（SFC版）

`.vue`ファイルをパースして`SFCDescriptor`を返す。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-sfc` |
| ソース | `packages/compiler-sfc/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| source | `string` | ○ | .vueファイルの全内容文字列 |
| options | `SFCParseOptions` | - | filename, sourceMap, pad等 |

**戻り値**

`SFCParseResult` — `{ descriptor: SFCDescriptor, errors }`

---

#### 58 compileScript

`<script>`および`<script setup>`ブロックをコンパイルする。マクロ処理・TypeScript型解析・バインディングメタデータ生成を行う。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-sfc` |
| ソース | `packages/compiler-sfc/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| sfc | `SFCDescriptor` | ○ | parse()結果のディスクリプタ |
| options | `SFCScriptCompileOptions` | ○ | id, isProd, sourceMap等 |

**戻り値**

`SFCScriptBlock`

---

#### 59 compileTemplate

SFCの`<template>`ブロックをレンダー関数コードにコンパイルする。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-sfc` |
| ソース | `packages/compiler-sfc/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| options | `SFCTemplateCompileOptions` | ○ | source, filename, id, scoped等 |

**戻り値**

`SFCTemplateCompileResults` — `{ code, ast?, preamble?, source, tips, errors, map? }`

---

#### 60 compileStyle / compileStyleAsync

`<style>`ブロックをコンパイルする（スコープ付きCSS、CSS Modules対応）。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-sfc` |
| ソース | `packages/compiler-sfc/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| options | `SFCStyleCompileOptions` | ○ | source, filename, id, scoped等 |

**戻り値**

`SFCStyleCompileResults` — `{ code, map, errors, modules?, dependencies }`

- `compileStyle`: 同期版
- `compileStyleAsync`: 非同期版（CSS Modulesのモジュール情報生成に必要）

---

### コンパイラ - compiler-ssr

#### 61 compile（SSR版）

SSR向けのテンプレートコンパイラ。SSR固有のトランスフォームチェーンを適用する。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/compiler-ssr` |
| ソース | `packages/compiler-ssr/src/index.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| source | `string \| RootNode` | ○ | テンプレート文字列または既存AST |
| options | `CompilerOptions` | - | コンパイラオプション |

**特性**: `ssr: true`, `prefixIdentifiers: true`, `cacheHandlers: false`, `hoistStatic: false`を強制設定

**戻り値**

`CodegenResult`

---

### SSR レンダラー

#### 62 renderToString

VueアプリまたはVNodeを完全なHTML文字列に非同期でレンダリングする。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/server-renderer` |
| ソース | `packages/server-renderer/src/renderToString.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| input | `App \| VNode` | ○ | VueアプリまたはVNode |
| context | `SSRContext` | - | SSRコンテキストオブジェクト |

**戻り値**

`Promise<string>`

```typescript
const html = await renderToString(app)
```

---

#### 63 renderToNodeStream

Node.jsのReadableストリームを返す。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/server-renderer` |
| ソース | `packages/server-renderer/src/renderToStream.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| input | `App \| VNode` | ○ | VueアプリまたはVNode |
| context | `SSRContext` | - | SSRコンテキスト |

**戻り値**

`Readable`（Node.js Readableストリーム）

---

#### 64 pipeToNodeWritable

レンダリング結果を既存のNode.js Writableストリームにパイプする。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/server-renderer` |
| ソース | `packages/server-renderer/src/renderToStream.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| input | `App \| VNode` | ○ | VueアプリまたはVNode |
| context | `SSRContext \| undefined` | - | SSRコンテキスト |
| writable | `Writable` | ○ | Node.js Writableストリーム |

**戻り値**

`void`

---

#### 65 renderToWebStream

Web Streams APIのReadableStreamを返す。Cloudflare Workers / Deno / 最新ブラウザ向け。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/server-renderer` |
| ソース | `packages/server-renderer/src/renderToStream.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| input | `App \| VNode` | ○ | VueアプリまたはVNode |
| context | `SSRContext` | - | SSRコンテキスト |

**戻り値**

`ReadableStream`（Web Streams API）

---

#### 66 pipeToWebWritable

レンダリング結果を既存のWeb WritableStreamにパイプする。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/server-renderer` |
| ソース | `packages/server-renderer/src/renderToStream.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| input | `App \| VNode` | ○ | VueアプリまたはVNode |
| context | `SSRContext \| undefined` | - | SSRコンテキスト |
| writable | `WritableStream` | ○ | Web WritableStream |

**戻り値**

`void`

---

#### 67 renderToSimpleStream

カスタムストリームインターフェースにレンダリング結果をパイプする低レベル関数。

**基本情報**

| 項目 | 内容 |
| --- | --- |
| パッケージ | `@vue/server-renderer` |
| ソース | `packages/server-renderer/src/renderToStream.ts` |

**パラメータ**

| パラメータ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| input | `App \| VNode` | ○ | VueアプリまたはVNode |
| context | `SSRContext` | ○ | SSRコンテキスト |
| stream | `SimpleReadable` | ○ | `{ push(chunk), destroy(err) }`を実装するストリーム |

**戻り値**

`T`（渡したストリーム）

---

### 組み込みコンポーネント（VNodeシンボル）

#### 68 Fragment / Text / Comment / Static / Teleport / Suspense / KeepAlive

VNode生成に使用される特殊シンボルおよび組み込みコンポーネント。

| 名前 | 型 | 説明 |
| --- | --- | --- |
| `Fragment` | `Symbol.for('v-fgt')` | フラグメント（複数ルートノード） |
| `Text` | `Symbol.for('v-txt')` | テキストノード |
| `Comment` | `Symbol.for('v-cmt')` | コメントノード |
| `Static` | `Symbol.for('v-stc')` | 静的コンテンツ |
| `Teleport` | コンポーネント | DOMの別の場所にコンテンツをレンダリング |
| `Suspense` | コンポーネント | 非同期依存解決まで fallback 表示 |
| `KeepAlive` | コンポーネント | 動的コンポーネントをキャッシュ |

**Teleport Props**

| プロパティ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| to | `string \| RendererElement` | ○ | テレポート先 |
| disabled | `boolean` | - | テレポート無効化 |

**Suspense Props**

| プロパティ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| timeout | `string \| number` | - | タイムアウト |
| suspensible | `boolean` | - | 親Suspenseに委任 |

**KeepAlive Props**

| プロパティ名 | 型 | 必須 | 説明 |
| --- | --- | --- | --- |
| include | `string \| RegExp \| (string \| RegExp)[]` | - | キャッシュ対象フィルタ |
| exclude | `string \| RegExp \| (string \| RegExp)[]` | - | キャッシュ除外フィルタ |
| max | `number \| string` | - | 最大キャッシュ数 |

---

### 主要な列挙体・定数

#### 69 各種Enum

| Enum名 | パッケージ | 説明 |
| --- | --- | --- |
| `TrackOpTypes` | @vue/reactivity | アクセスの種類（GET, HAS, ITERATE） |
| `TriggerOpTypes` | @vue/reactivity | 操作の種類（SET, ADD, DELETE, CLEAR） |
| `ReactiveFlags` | @vue/reactivity | 内部フラグ文字列 |
| `EffectFlags` | @vue/reactivity | エフェクト状態ビットフラグ |
| `WatchErrorCodes` | @vue/reactivity | ウォッチャーエラーコード |
| `PatchFlags` | @vue/shared | VNodeパッチ最適化ビットフラグ |
| `ShapeFlags` | @vue/shared | VNode形状ビットフラグ |
| `SlotFlags` | @vue/shared | スロット種別フラグ |
| `NodeTypes` | @vue/compiler-core | AST ノード種別 |
| `ElementTypes` | @vue/compiler-core | 要素種別（ELEMENT, COMPONENT, SLOT, TEMPLATE） |
| `ConstantTypes` | @vue/compiler-core | 定数レベル（静的ホイスト最適化用） |
| `BindingTypes` | @vue/compiler-core | バインディングメタデータ種別 |
| `ErrorCodes` | @vue/compiler-core | コンパイラエラーコード |
| `DOMErrorCodes` | @vue/compiler-dom | DOM固有コンパイラエラーコード |

---

## 備考

- 本プロジェクトはVue.js Coreフレームワークであり、HTTPのREST/GraphQL APIではなく、JavaScriptライブラリとしてのプログラマティックAPIを提供する
- 本書ではユーザー向けの主要な公開APIを中心に記載した。コンパイラ生成コード向けの内部ヘルパー（`renderList`, `renderSlot`, `openBlock`, `createBlock`等）は本書の各APIエンドポイント定義では省略しているが、API一覧のソースファイルとして参照可能である
- 各APIの詳細な型定義はTypeScriptソースコードの型シグネチャを正とする
- `@vue/shared`パッケージのユーティリティ関数群は主にVue内部で使用されるが、一部（`camelize`, `capitalize`, `toHandlerKey`, `normalizeClass`, `normalizeStyle`, `normalizeProps`, `toDisplayString`）はメインの`vue`パッケージから再エクスポートされ公開APIとして利用可能
