PrismitaLEARN · PRACTICE · GROW

What is the difference between ref and reactive in Vue 3?

Vue.js Reactivity Intermediate 2–3 Yrs3–5 Yrs Conceptual 1 min read

Quick Answer

ref(value) wraps any value (primitive or object) in a reactive box you access via .value. reactive(obj) makes an object deeply reactive with no .value. Common guidance: use ref for primitives and as the default; use reactive for a group of related state — but destructuring a reactive loses reactivity (use toRefs).

ref wraps a single value and you read and write it through .value in script, though the template unwraps it for you. reactive makes a whole object reactive without any .value. The catch with reactive is that if you destructure it — const { count } = state — you get a plain value and lose reactivity, so you'd use toRefs. And you can't reassign a reactive object as a whole. Because of those footguns, a lot of teams just use ref for everything and keep it consistent.

  • ref: const count = ref(0); count.value++. In the template you don't need .value — Vue unwraps it.
  • reactive: const state = reactive({ count: 0 }); state.count++. But const { count } = state gives a plain non-reactive number.
  • reactive can't be reassigned wholesale (state = {...} breaks it); a ref can (obj.value = newObj).
  • Many teams standardise on ref everywhere for consistency.
All Vue.js questions More on Reactivity