Vue 3 は『学習コスト低・パフォーマンス良』の選択肢
Vue 3 は Composition API と Vapor Mode 等の進化で React に比肩する選択肢として定着しました。本記事では編集部の視点で、実務での使い方を公開情報をもとに整理します。React 学習ロードマップ もご参考に。
Composition API の基本
(1) setup()関数または script setup。(2) ref/reactive：リアクティブな値。(3) computed/watch：派生値と副作用。(4) provide/inject：依存性注入。(5) composables：ロジックの再利用。React Hooks に近い思想で書けるためエンジニアの行き来が容易です。
Nuxt 3 の特徴
(1) SSR/SSG/ISR対応。(2) ファイルベースルーティング。(3) auto-imports：定型コードの削減。(4) nitro：ユニバーサルサーバーランタイム。(5) Hybrid Rendering：ページ毎に戦略選択。Next.js に近い体験を提供します。Next.js App Router もご参考に。
状態管理 (Pinia)
(1) defineStoreでストア定義。(2) state/getters/actionsの3要素。(3) TypeScript 親和性が高い。(4) Devtools 統合。(5) Vuex に代わる現代の標準。モジュール構造で大規模アプリでも扱いやすい。
サーバー連携
(1) useFetch / useAsyncData：型安全フェッチ。(2) サーバールート：server/api/ 配下。(3) tRPC / GraphQL連携。(4) nuxt-prepare：データプリロード。(5) キャッシュ戦略：ssr+クライアントキャッシュ。Zod/Valibot 実践 も合わせて。
パフォーマンス最適化
(1) v-memo：メモ化。(2) Vapor Mode (実験的)：仮想DOMを使わない高速モード。(3) lazy loading：defineAsyncComponent。(4) Code Splitting：Nuxt 自動。(5) Web Vitals監視。Web Vitals 最適化 もご参考に。
採用判断
(1) 新規プロジェクト：チームスキルで判断。(2) Vue 2 からの移行：公式マイグレーションパスあり。(3) 採用市場：React より少なめ(公開情報をもとに)。(4) エコシステム：React に次ぐ規模。(5) 学習コスト：React より緩やか。
失敗しがちなパターン
(1) Options API と Composition API 混在。(2> props 過剰：1コンポーネントが肥大。(3) watch の無限ループ。(4) SSR 環境差：window 参照エラー。(5) Pinia ストア過剰：状態散漫。対策は、(1)新規はComposition、(2)分割、(3)依存最小化、(4)client-only、(5)ストア統合、です。