shallowReactive() Shallow Reactive Object
Last updated: 2026-10-22
shallowReactive() Shallow Reactive Object
shallowReactive() makes only the first level of properties reactive; nested objects stay unproxied.
| Group | Reactivity: Advanced |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const state = shallowReactive({ count: 0, nested: { a: 1 } })
state.count++ // ✅ triggers
state.nested.a++ // ❌ no trigger⚙️ Arguments
| target | An object (only its own properties are proxied) |
|---|
Returns：A shallow reactive proxy
▶ Example
Edit the code below and see the live result:
Output：
The top-level button updates the number; the nested one changes data without refreshing the view.💡 Key Points
ℹ️ Note Same niche as shallowRef: large structures where only the first level matters.
⚠️ Warning Missing updates does not mean unchanged data — a common pitfall.
🏷️ Related Advanced
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Is it only a performance difference?
A No — nested state is not reactive either; it is a semantic difference.
Q Can nested objects still be watched?
A Only with explicit deep watching or a deep ref wrapper.
Q Why does it exist?
A To provide a low-overhead reactive shell over large or external data.
