shallowRef() 浅いリアクティブな ref
最終更新：2026-10-22
shallowRef() 浅いリアクティブな ref
shallowRef() は .value の置き換えだけを追跡します。値を丸ごと差し替えると更新がトリガーされますが、内部プロパティの変更ではトリガーされません。
| グループ | リアクティビティ: 応用 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const big = shallowRef({ list: [] })
big.value = { list: [1] } // ✅ 発火する
big.value.list.push(2) // ❌ 発火しない（内部はプロキシ化されていない）⚙️ 引数
| value | 任意の初期値（内部オブジェクトは深くプロキシ化されません） |
|---|
戻り値：浅い ref オブジェクト
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Pushing inside leaves the number unchanged; replacing the whole value shows 3.💡 ポイント
💡 ヒント 大きなデータセット、サードパーティのインスタンス、丸ごと差し替えるグラフやマップのオブジェクトに適しています。
⚠️ 注意 内部を変更した後に triggerRef で強制的に更新を促せますが、丸ごと置き換えるほうがスマートです。
ℹ️ 補足 isShallow() で ref が浅いかどうかを判定できます。
🏷️ 関連応用
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q いつ shallowRef が必要になりますか？
A API から取得した大きな配列のように、ほとんど読み取り専用の大きな構造を丸ごと差し替えて使う場合です。深いプロキシの構築コストを省けます。
Q push したのに画面が更新されないのはなぜですか？
A 内部オブジェクトはプロキシ化されていないため、Vue はその変更を追跡できません。.value を丸ごと差し替えると更新が通知されます。
Q ref とのパフォーマンス差は大きいですか？
A 深く大きなオブジェクトでは顕著です（再帰的なプロキシ化と依存収集を省けます）。小さなオブジェクトでは無視できます。
