Vue リファレンス

最終更新：2026-10-22

Vue リファレンス

アルファベット順の Vue API 121 項目：ディレクティブ、Composition API、Options API、ビルトイン、グローバル API。

#
$attrs	$attrs は、親が渡したもののうち props で宣言されていない属性を集めます。inheritAttrs: false と組み合わせて正確に転送します。
$emit()	$emit はカスタムイベントを発火させ、引数は親のリスナーへ届きます。子から親への標準的なチャネルです。
$refs	$refs は ref 属性を付けた要素やコンポーネントインスタンスを保持し、スクリプトから DOM や子の API へアクセスできるようにします。
<component>	<component :is="..."> はデータに応じて描画するコンポーネントやネイティブ要素を動的に切り替えます。タブやルータービューの背後にある仕組みです。
<KeepAlive>	<KeepAlive> は包んだコンポーネントのインスタンスをキャッシュします。切り替えても状態が残り、再レンダリングもスキップされます（タブやルータービューでよく使われます）。
<slot>	<slot> は子コンポーネントのテンプレート内の内容の出口を宣言します。親が渡した内容はここに置き換えられ、デフォルト（フォールバック）の内容も持たせられます。
<Suspense>	<Suspense> は非同期の依存（非同期コンポーネント、async setup）が整うまでフォールバックの内容を表示し、整ったら実際の内容へ切り替えます。
<Teleport>	<Teleport> は内容をページの別の場所（body など）へ描画します。モーダルやドロップダウンが親コンテナの overflow で切り取られたり、重なり順が制限されたりする...
<template>	<template> は透明なグループ化のコンテナです。自らは要素を描画せず、v-if / v-for のグループ化や多分岐の内容の受け皿に使います。
<Transition>	<Transition> は単一の要素やコンポーネントを包み、挿入 / 削除のときに自動で CSS トランジションのクラスや JS フックを適用します。
<TransitionGroup>	<TransitionGroup> は複数の要素に出入りトランジションを提供し、FLIP 技術で位置の滑らかな移動も実現します。
A
activated	activated は <KeepAlive> でキャッシュされたコンポーネントが再表示されるときに呼ばれます。ポーリングの再開やデータの更新を行います。
app.component()	app.component() はコンポーネントをグローバルに登録します。すべてのコンポーネントテンプレートで直接使えます。ボタンやアイコンなどのベースコンポーネントに向いています...
app.config	app.config は errorHandler、warnHandler、globalProperties、performance など、アプリ全体の設定を提供します。
app.directive()	app.directive() はグローバルなカスタムディレクティブを登録します。どのコンポーネントテンプレートでも v-xxx として使えます。権限制御やクリックアウトサイドなど...
app.mount()	app.mount() はアプリをコンテナ要素にマウントします。コンテナ内部はアプリがレンダリングした DOM で置き換えられます。
app.provide()	app.provide() はアプリケーションレベルで依存を提供します。すべてのコンポーネントが inject できるため、グローバル設定や i18n インスタンスなどに向いていま...
app.use()	app.use() はプラグインをインストールします。プラグインはグローバルコンポーネントやディレクティブの登録、依存の注入、アプリ設定の補完などができます（ルーターや状態管理など...
B
beforeCreate	beforeCreate はインスタンスが初期化される前に呼ばれます。data、methods、computed はまだ存在しないため、ほとんど使われません。
beforeMount	beforeMount は最初のレンダリングの直前に呼ばれます。レンダー関数は準備済みですが、DOM はまだ存在しません。
beforeUnmount	beforeUnmount はインスタンスが破棄される直前に呼ばれます。DOM はまだ無傷なので、タイマーやリスナーを片付けるタイミングです。
beforeUpdate	beforeUpdate はデータが変化した後、DOM へのパッチが行われる前に呼ばれます。この時点で読み取れるのはまだ前の DOM です。
C
components	components オプションは子コンポーネントをローカル登録し、このコンポーネント内にスコープを限定します。
computed	computed オプションは派生値を宣言します。依存が変わると自動的に再計算されてキャッシュされ、テンプレートでは通常のプロパティと同じように使えます。
computed()	computed() は他のリアクティブな状態から値を導き出し、結果をキャッシュします。依存が変化したときにのみ再計算されます。
createApp()	createApp() はルートコンポーネントからアプリインスタンスを作成します。返される app オブジェクトは、コンポーネント登録、プラグインインストール、マウントなどのアプリ...
created	created はインスタンスの初期化が完了し、data と methods が使えるようになった後に呼ばれます。まだ DOM は存在せず、データの初期化やリクエスト送信に適した場...
createSSRApp()	createSSRApp() は createApp と同じですが、サーバーでレンダリングされた HTML を再レンダリングする代わりに、ハイドレーションで引き継ぎます。
customRef()	customRef() はファクトリ関数で依存の追跡とトリガーのタイミングをカスタマイズできます。定番の用途は入力欄へのデバウンスです。
D
data	data オプションは、オブジェクトを返す関数としてコンポーネントのリアクティブな状態を宣言します。これにより、各インスタンスが独立したデータのコピーを持ちます。
deactivated	deactivated は <KeepAlive> でキャッシュされたコンポーネントが非表示になるときに呼ばれます。破棄ではないため、タイマーをここで一時停止します。
defineAsyncComponent()	defineAsyncComponent() は必要になった時点で初めて読み込まれるコンポーネントを作成します。ルートレベルや重いコンポーネントの遅延読み込みに使います。
defineComponent()	defineComponent() は型推論の補助関数です。主に TypeScript プロジェクトでコンポーネントオプションに正確な型を付けます。ランタイムの挙動は直接オブジェク...
defineCustomElement()	defineCustomElement() は Vue コンポーネントを標準の Web Component にラップします。任意のフレームワークやネイティブページで <my-ele...
E
effectScope()	effectScope() は複数のウォッチャーや算出プロパティを 1 つのスコープにまとめ、一括で開始・停止できます。個別の stop 関数を管理する手間がなくなります。
emits	emits オプションは、コンポーネントが親に向けて発行するイベントを宣言します。ドキュメント化と実行時の検証の役割を持ち、未宣言のイベントは警告が出ます。
errorCaptured	errorCaptured は子孫コンポーネントのエラーを捕捉します。false を返すとグローバルハンドラーへの伝播を止められます。
expose	expose オプションは、親がテンプレート参照経由でアクセスできるメンバーを制限します。デフォルトではすべて公開され、宣言後は指定した項目だけが公開されます。
G
getCurrentScope()	getCurrentScope() は現在の effectScope（なければ undefined）を返します。ユーティリティ関数内で副作用を呼び出し元のスコープに紐づけるのに役立...
H
h()	h() は仮想ノード（VNode）を作成します。レンダー関数と JSX の基盤となる API で、動的に構造を生成する場合にも使われます。
hasInjectionContext()	hasInjectionContext() は、現在が inject を使えるコンテキスト（setup やコンポーネント内部）かどうかを判定します。共通ユーティリティを書くときの事...
I
inheritAttrs	inheritAttrs: false にすると、未宣言の属性がルート要素へ自動的に付かなくなり、正確に転送できるようになります。
inject	inject オプションは依存を宣言します。デフォルト値なしの配列、または from と default を持つオブジェクトが使えます。
inject()	inject() は、祖先が provide したデータを任意の子孫コンポーネントで受け取れます。デフォルト値をつけてフォールバックも可能です。
is	is 属性は <component> にどのコンポーネントやネイティブタグを描画するかを指定します。ネイティブ要素の切り替え（table 内の tr / td など）にも使われます...
isProxy()	isProxy() は値が reactive() または readonly() で作られたプロキシかどうかを判定します。
isReactive()	isReactive() は値が reactive()（またはそこから派生したプロキシ）で作られたものかどうかを判定します。
isReadonly()	isReadonly() は、値が readonly() によって作られた（ネストを含む）読み取り専用プロキシかどうかを判定します。
isRef()	isRef() は値が ref オブジェクトかどうかを判定します。通常の値とリアクティブな参照の両方を扱うユーティリティ関数で便利です。
K
key	key は v-for の識別子です。Vue がノードを正確に再利用 / 再構築できるようにし、リストの追加・削除時の状態の正しさを保証します。
M
markRaw()	markRaw() はオブジェクトにマークを付け、リアクティブな構造に入れてもプロキシ化されないようにします。サードパーティのインスタンスや大きな静的データに向いています。
mergeProps()	mergeProps() は複数の属性オブジェクトをマージします。class と style は連結され、イベントリスナーはすべて保持され、それ以外の属性は後ろの値が前を上書きしま...
methods	methods オプションはコンポーネントの関数を一括で宣言します。イベントハンドラーもユーティリティ関数もここに書き、テンプレートから名前で呼び出します。
mounted	mounted はコンポーネントがレンダリングされて DOM に挿入された後に呼ばれます。テンプレート参照の操作、サードパーティーの初期化、計測の標準的な場所です。
N
name	name オプションはコンポーネントに名前を付けます。Devtools、再帰的な自己参照、エラーメッセージに影響します。
nextTick()	nextTick() は、次の DOM 更新が完了した後に解決される Promise を返します。状態を変更した直後に最新の DOM を読みたいときに使います。
O
onActivated()	onActivated() は、<KeepAlive> にキャッシュされたコンポーネントが再び表示（アクティブ化）されるときに呼ばれます。タイマーの再開やデータの再取得に向いていま...
onBeforeMount()	onBeforeMount() は、コンポーネントが初めて DOM に描画される直前に呼ばれます。テンプレートはコンパイル済みですが、実際の DOM はまだ作られていません。
onBeforeUnmount()	onBeforeUnmount() はコンポーネントが破棄される直前に呼ばれます。DOM はまだ使える状態なので、タイマー、リスナー、サードパーティインスタンスを手動でクリーンアッ...
onBeforeUpdate()	onBeforeUpdate() は、リアクティブなデータが変化した後、DOM が更新される前に呼ばれます。このタイミングでは更新前の DOM の状態を読めます。
onDeactivated()	onDeactivated() は、<KeepAlive> にキャッシュされたコンポーネントが隠れる（非アクティブ化される）ときに呼ばれます。コンポーネントは破棄されていないので、...
onErrorCaptured()	onErrorCaptured() は、子孫コンポーネントのレンダリング・ライフサイクル・ウォッチャーで投げられたエラーをキャッチし、エラーが上に伝播するのを止められます。
onMounted()	onMounted() はコンポーネントと子コンポーネントが DOM にマウントされた後に呼ばれます。テンプレート ref の取得、サードパーティライブラリの初期化、リクエスト送信...
onRenderTracked()	onRenderTracked() は、コンポーネントのレンダリング中にリアクティブな依存が 1 つ収集されるごとに呼ばれます。デバッガと組み合わせると「何が自分を再レンダリングさ...
onRenderTriggered()	onRenderTriggered() は、ある依存の変更がコンポーネントの再レンダリングを引き起こしたときに呼ばれ、「何が今回の更新をトリガーしたか」を直接教えてくれます。
onScopeDispose()	onScopeDispose() は現在のスコープが停止するときにクリーンアップを実行します。コンポーザブル内でグローバルリスナーやタイマーの解除に使います。
onServerPrefetch()	onServerPrefetch() はサーバー側レンダリング中にのみ実行されます。完了を待ってから HTML が描画されるので、SSR 時の非同期データの事前取得に使います。
onUnmounted()	onUnmounted() は、コンポーネントが破棄され、DOM が取り除かれ、すべてのリアクティブな副作用が停止した後に呼ばれます。
onUpdated()	onUpdated() は、リアクティブな変更によってコンポーネントが再レンダリングされ DOM が更新された後に呼ばれます。更新後の DOM サイズの取得やサードパーティライブラ...
onWatcherCleanup()	onWatcherCleanup() はクリーンアップ関数を登録します。ウォッチャーが無効になる（再実行または停止する）直前に呼ばれ、リクエストやタイマーのキャンセルなどに使います...
P
props	props オプションは、コンポーネントが受け取る属性を宣言します。配列の省略記法、または型・必須・デフォルト値の検証を指定できるオブジェクト構文が使えます。
provide	provide オプションはデータを下方向へ提供します。静的な値にはオブジェクト、this から派生する値には関数を使います。
provide()	provide() は祖先コンポーネントからデータを提供し、どの階層の子孫でも inject で受け取れます。props を毎階層バケツリレーする必要がありません。
R
reactive()	reactive() はオブジェクトや配列を深いリアクティブなプロキシで包みます。プロパティの読み書きを直接行うだけで更新がトリガーされます。
readonly()	readonly() は元のデータの読み取り専用プロキシを作成します。書き込みは警告が出て失敗するため、データの意図しない変更を防げます。
ref	ref 属性は要素やコンポーネントに参照名を付け、スクリプトから $refs や ref() / useTemplateRef() でアクセスできるようにします。
ref()	ref() は任意の値をリアクティブなオブジェクトで包み、.value を通してアクセスします。プリミティブ型（文字列・数値・真偽値）や、丸ごと置き換えたい値を保持するための方法で...
render	render オプションはテンプレートの代わりに仮想ノードを返す関数です。構造を完全に JS で表現したい場合（動的な階層が深い場合など）に使います。
renderToString()	renderToString() は Node のサーバー側でアプリを HTML 文字列にレンダリングします。SSR の出力工程で、クライアントでは createSSRApp と組...
resolveComponent()	resolveComponent() はレンダー関数内で、登録名からコンポーネントを解決します。得た定義を h() でレンダリングできます。
S
shallowReactive()	shallowReactive() はオブジェクトの第一階層のプロパティだけをリアクティブにします。ネストされたオブジェクトはプロキシ化されません。
shallowReadonly()	shallowReadonly() は第一階層のプロパティだけを読み取り専用にします。ネストされたオブジェクトは変更可能なままです。
shallowRef()	shallowRef() は .value の置き換えだけを追跡します。値を丸ごと差し替えると更新がトリガーされますが、内部プロパティの変更ではトリガーされません。
slots	slots オプションは、スロットへのアクセスを関数形式で宣言し、トラッキング可能な $slots を生成します。「スロットが渡されているか」もリアクティブに判定できます。
T
template	template オプションは、コンポーネントの HTML テンプレート文字列を指定します。実行時にレンダー関数へコンパイルされます（完全版 Vue でサポート。ビルド版では通常 ...
toRaw()	toRaw() はプロキシの背後にある元のオブジェクトを返します。リアクティブな追跡を回避したいときや、データを外部ライブラリに渡したいときに使います。
toRef()	toRef() はリアクティブなオブジェクトの 1 つのプロパティを、リンクが保たれた ref に変換します。この ref を介した読み書きは、元のプロパティへの操作としてそのまま...
toRefs()	toRefs() はリアクティブなオブジェクトの各プロパティを ref に変換します。分割代入後もリアクティビティが保たれる、reactive な状態を分割代入する際の標準的な方法...
toValue()	toValue() は通常の値、ref、getter 関数を現在値に統一して取得します。再利用可能な関数は 3 つの入力形態をすべて受け付けられ、呼び出し側は区別する必要がありませ...
triggerRef()	triggerRef() は shallowRef に紐づく副作用を手動でトリガーします。内部の変更を Vue が追跡できないときに通知を補うための抜け道です。
U
unmounted	unmounted はインスタンスが破棄され、DOM が取り除かれた後に呼ばれます。リソース解放を行う最後の場所です。
unref()	unref() は isRef(v) ? v.value : v の省略形です。ref なら内部の値を返し、通常の値はそのまま返します。
updated	updated はデータの変化でコンポーネントが再レンダリングされ、DOM へのパッチが完了した後に呼ばれます。再計測やウィジェットの同期に適しています。
useAttrs()	useAttrs() は、props / emits として宣言されていない透過属性（class、id、イベントリスナーなど）を返します。手動で配布するのに使います。
useHost()	useHost() はカスタム要素の内部でホスト要素（shadow DOM のホスト）を取得します。ホストの属性やスタイルを操作するために使います。
useId()	useId() はコンポーネントインスタンスごとに安定した一意の ID 文字列を返します。label/for や aria の関連付けなどのアクセシビリティ属性に使い、SSR とク...
useModel()	useModel() は <script setup> の中で書き込み可能なモデルを定義します。親コンポーネントが v-model でバインドするとき、この値を読み書きします。
useSlots()	useSlots() は親コンポーネントから渡されたスロット関数の集合を返します。「あるスロットが渡されているか」の判定や、スクリプトでの手動描画に使います。
useSSRContext()	useSSRContext() はサーバーレンダリング中にコンテキストオブジェクトを取得します。クライアントのハイドレーション時に再利用するデータを載せるために使います。
useTemplateRef()	useTemplateRef() は文字列のキーで同名の ref 属性のテンプレート参照を取得します。「同じ名前の変数を宣言する」というボイラープレートが不要になります。
V
v-bind (:)	v-bind は式の結果を HTML 属性にバインドします。省略記法はコロンです。class と style はオブジェクト構文と配列構文もサポートします。
v-cloak	v-cloak はコンパイルが完了するまで要素に残る属性です。CSS と組み合わせて生のテンプレートを隠し、初回描画時に {{ }} がちらつくのを防ぎます。
v-else	v-else は v-if に対する「それ以外」の分岐を提供します。v-if が偽のときにレンダリングされ、式は取りません。
v-else-if	v-else-if は複数の条件分岐をつなぎ、真になる条件が見つかるまで順に評価します。
v-for	v-for は配列やオブジェクトを反復処理して要素のリストをレンダリングします。構文は item in items です。効率的な更新のために必ず key を指定してください。
v-html	v-html は文字列を HTML として解析して要素に挿入します。リッチテキストの表示に使われます。
v-if	v-if は式が真（truthy）のときだけブロックをレンダリングします。偽のとき要素は破棄されて DOM から取り除かれ、再び真になると再作成されます。
v-memo	v-memo は依存配列を受け取ります。配列の値が変わらない場合、サブツリー全体の更新がスキップされます。非常に長いリストのパフォーマンスツールです（Vue 3.2+）。
v-model	v-model はフォームコントロールとデータの間に双方向バインディングを作ります。入力が状態を更新し、状態の変化がコントロールに反映されます。
v-on (@)	v-on はイベントリスナーを割り当てます。省略記法は @ です。.stop、.prevent、.once などの修飾子で挙動をカスタマイズできます。
v-once	v-once は要素を 1 回だけレンダリングします。以降、依存するデータが変わっても再レンダリングされません。静的コンテンツの最適化に使います。
v-pre	v-pre はその要素と子要素のコンパイルをスキップします。{{ }} などのテンプレート構文をそのまま表示できるため、テンプレートコードを表示する際に役立ちます。
v-show	v-show は式の真偽に応じて要素の display スタイルを切り替えます。要素は常に DOM に残り、表示・非表示だけが変わります。
v-slot (#)	v-slot はスロットの内容を指定します。省略記法は # です。テンプレートの断片を子コンポーネントの名前付きスロットやスコープ付きスロットに渡します。
v-text	v-text は式の値を要素のテキストコンテンツ（textContent）として設定します。マスタッシュ補間と同等ですが、要素の内容全体を置き換えます。
W
watch	watch オプションは、監視するデータ名をキーとしてコールバックを整理します。handler、deep、immediate、文字列によるメソッド名の省略記法をサポートします。
watch()	watch() は 1 つ以上のリアクティブなソースを監視し、変化があったときに新旧の値とともにコールバックを実行します。副作用を伴うリアクティブなロジックに適しています。
watchEffect()	watchEffect() は渡された関数を即座に実行し、その中で使われているリアクティブなデータを自動的に追跡します。依存が変化するたびに再実行されます。
watchPostEffect()	watchPostEffect() は watchEffect に flush: 'post' を付けたものと同等です。コンポーネントの DOM 更新後に実行されるため、更新後の ...
watchSyncEffect()	watchSyncEffect() は watchEffect に flush: 'sync' を付けたものと同等です。依存が変わるとバッチ処理を経ずに即座に同期的に実行されます。
withModifiers()	withModifiers() はレンダー関数内で、イベントハンドラーに修飾子の挙動（stop、prevent、once など）を付与します。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて