shallowReactive() 浅いリアクティブオブジェクト
最終更新：2026-10-22
shallowReactive() 浅いリアクティブオブジェクト
shallowReactive() はオブジェクトの第一階層のプロパティだけをリアクティブにします。ネストされたオブジェクトはプロキシ化されません。
| グループ | リアクティビティ: 応用 |
|---|---|
| 種類 | API |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
const state = shallowReactive({ count: 0, nested: { a: 1 } })
state.count++ // ✅ 発火する
state.nested.a++ // ❌ 発火しない⚙️ 引数
| target | オブジェクト（自身のプロパティのみプロキシ化） |
|---|
戻り値：浅いリアクティブなプロキシ
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
The top-level button updates the number; the nested one changes data without refreshing the view.💡 ポイント
ℹ️ 補足 shallowRef と同じような使い所です。第一階層だけリアクティブにできればよい大きな状態構造に向いています。
⚠️ 注意 ビューが更新されない＝データが変わっていない、ではない点に注意。ネストしたデータは実際には変わっていても描画がトリガーされない、という落とし穴になりがちです。
🏷️ 関連応用
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q reactive との違いは性能だけですか？
A いいえ。ネストした状態がリアクティブでなくなるという挙動の違いもあり、単なる最適化スイッチではなく意味的な違いです。
Q ネストされたオブジェクトは監視できますか？
A 元のオブジェクトを明示的に deep 監視するか、ref で深くラップする必要があります。
Q なぜこの API が存在するのですか？
A 大きなデータや外部データに対して、再帰的なプロキシ化のコストをかけない低オーバーヘッドなリアクティブな外殻を提供するためです。
