reactive() Create a Reactive Object Proxy
Last updated: 2026-10-22
reactive() Create a Reactive Object Proxy
reactive() wraps an object or array in a deep reactive proxy — reading and writing properties directly triggers updates.
| Group | Reactivity: Core |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const state = reactive({ count: 0 })
state.count++ // read/write directly, no .value⚙️ Arguments
| target | An object, array or collection such as Map/Set |
|---|
Returns：A reactive proxy of the original object; both share the same data
▶ Example
Edit the code below and see the live result:
Output：
Shows 'Count: 0'; each click increments it.💡 Key Points
⚠️ Warning Objects and arrays only — primitives lose reactivity, use ref() there.
⚠️ Warning Destructuring breaks reactivity: use toRefs(state) or keep state.count.
ℹ️ Note Replacing the whole object cuts the proxy link — ref handles wholesale replacement better.
🏷️ Related Core
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q reactive or ref — which one?
A Prefer ref by default: any type, replaceable, safe to destructure. Use reactive when object-style state reads best.
Q Why does mutating state.x update the page?
A The Proxy traps reads and writes, collecting dependencies on read and notifying on write.
Q How does the proxy relate to the original object?
A They share the same data; the proxy simply adds reactivity tracking.
