20 docs tagged with "composition-api"

Composable をサーバーでも描画する構成に置いたときに壊れる書き方を扱います。window を呼び出し時点で読む形、onMounted に閉じ込めていない副作用、モジュールスコープに置いた状態がリクエスト間で漏れる問題を、実測した挙動とともに説明します。

状態とロジックをまとめて再利用する Composable の作り方を扱います。戻り値と引数の形、副作用の後片付けをどこに預けるか、呼べる位置の制約を、実装の挙動から説明します。

サーバーとの通信をどこに書くかを扱います。取り消しと競合状態の扱い、環境変数で接続先を切り替える方法とビルド出力に何が残るか、Nuxt の useFetch と $fetch の使い分けを扱います。

コンポーネントをまたいで状態を共有する Pinia を扱います。Option Store と Setup Store の違い、storeToRefs が必要になる理由、$patch と $subscribe の通知のタイミングを実測で確かめます。

props のバケツリレーを避ける provide と inject を扱います。値の探し方、既定値が使われない条件、InjectionKey による型付け、そしてテンプレートの記法では書けない DOM 操作をカスタムディレクティブへ寄せる方法を説明します。

defineProps と defineEmits で親子の境界を型として宣言する方法を扱います。Vue 3.5 で安定化した props の分割代入と、テンプレート参照の取得方法も含みます。

要素を DOM ツリーの別の場所へ描く Teleport と、非同期の準備が終わるまでの表示を 1 か所にまとめる Suspense を扱います。元の位置に何が残るか、fallback が出る条件、2 度目以降に戻らない理由を実測で説明します。

URL とコンポーネントを対応づけるルート定義を扱います。リンクとプログラムからの遷移、パラメータを含む動的ルート、レイアウトを共有する入れ子のルート、そして遅延ローディングとコード分割の現行の書き方までを実測で説明します。

Vue 3.5 の Composition API を土台に、リアクティビティの仕組みからコンポーネント設計、Vue Router、Pinia、Nuxt 4 までを全 20 章で体系化するガイド。script setup と TypeScript を前提に、なぜその書き方になるのかを各 API の設計意図から説明します。

イベントハンドラの書き方と修飾子、v-model による双方向のバインディングを扱います。ハンドラに括弧を付けるかどうかでイベントオブジェクトの渡り方が変わる仕組みも説明します。

自作コンポーネントに v-model を持たせる方法を扱います。props と emit の組を defineModel でまとめる書き方、値が親と子のどちらに置かれるか、複数の値を双方向にするときの名前の付け方、修飾子の受け取り方を説明します。

子コンポーネントの内部に親のマークアップを差し込むスロットを扱います。フォールバックが出る条件、スロットが渡されたかの判定、子の持つデータを親へ渡すスコープ付きスロット、defineSlots による型宣言までを扱います。

属性のバインディング、クラスとスタイルの動的な切り替え、条件分岐、リスト描画を扱います。v-for の key に一意な値が必要な理由と、v-if と v-show の使い分けまで整理します。

要素の表示と非表示にアニメーションを付ける仕組みを扱います。クラスが付く順序、Vue が終わりを判定する方法、JavaScript で制御するときに done を待つ条件、リストの並べ替えに追従させる仕組みまでを実測で説明します。

ルート遷移の途中に割り込むガードを扱います。公式の 12 段の解決フローを実測で確かめ、return 形式と非推奨になった next()、meta の統合、無限リダイレクトの避け方までを説明します。

コンポーネントの生成から破棄までのフックを順序とともに整理します。DOM 操作をどこに書くか、後片付けをどこで行うかの判断を扱います。

値の変更が画面に反映される仕組みを ref と reactive の違いから解説します。再代入でリアクティブ性が失われる理由、分割代入が壊れる条件、toRefs が何を保つのかを扱います。

ログイン処理を通して認証状態の持ち方を扱います。トークンを localStorage に置かない理由、httpOnly cookie とミドルウェアでの遷移の保護、ビルド成果物とホスティングの設定までを実挙動で確かめます。

create-vue で Vue 3 と TypeScript のプロジェクトを作る手順と、単一ファイルコンポーネントの 3 ブロック構成を扱います。対話で聞かれる機能の選び方と、生成されるディレクトリの役割まで整理します。

computed のキャッシュと watch の副作用を対比し、どちらを選ぶかの判断基準を示します。watchEffect の自動追跡と、非同期処理のクリーンアップまで扱います。