midVue.js
Explain the difference between ref and reactive in Vue 3.
Updated May 4, 2026
Short answer
ref is for primitives and objects (requires .value), while reactive is for objects only (no .value needed).
Deep explanation
ref takes an inner value and returns a reactive and mutable ref object. The ref object has a single property .value that points to the inner value. reactive returns a reactive proxy of the object. Key difference: ref can hold primitives (strings, numbers) and handles re-assignment of the whole object better, whereas reactive only handles objects/arrays and loses reactivity if the variable is re-assigned to a new object.
Real-world example
Use ref for a simple counter or a single string; use reactive for a complex form state object where you don't want to type .value constantly.
Common mistakes
- Destructuring a `reactive` object directly, which causes it to lose reactivity.
Follow-up questions
- How do you destructure a reactive object without losing reactivity?