What is the difference between ref and reactive in Vue 3?
Learn when to use ref vs reactive in Vue 3, how .value works, why destructuring breaks reactivity, and how toRefs keeps object properties reactive.
Expected Interview Answer
ref creates a reactive wrapper around any value (primitive or object) accessed through its .value property, while reactive creates a reactive Proxy that works only on objects, arrays and collections and is accessed directly without .value.
Use ref for primitives like numbers, strings and booleans, and when you need a reactive reference you can reassign wholesale. Use reactive for objects whose nested properties you mutate in place. A key gotcha is that destructuring a reactive object breaks reactivity, so toRefs is used to keep the connection; ref values, by contrast, keep reactivity as long as you go through .value (and templates unwrap it automatically).
- ref works with primitives and objects alike
- reactive gives clean direct access without .value for objects
- ref can be reassigned to a whole new value while staying reactive
- Templates auto-unwrap refs so no .value is needed there
- toRefs bridges reactive objects back into individual refs
AI Mentor Explanation
A ref is like a labeled scoreboard slot you always read through its display window: 'runs.value'. You can wipe the slot and set an entirely new total, and it still updates live. A reactive object is like the full match state board itself — you edit wickets or overs directly on it. But if you tear a single figure off the board to carry around, it stops updating; you must keep it attached to stay live.
Step-by-Step Explanation
Step 1
Pick ref for primitives
Wrap numbers, strings and booleans in ref because reactive cannot make a bare primitive reactive.
Step 2
Access refs via .value
In script, read and write ref through .value; templates unwrap it automatically so you omit .value there.
Step 3
Pick reactive for objects
Use reactive for objects, arrays and Maps whose nested properties you mutate directly.
Step 4
Mutate in place
Change reactive object properties directly (state.user.name = '...') rather than reassigning the whole object.
Step 5
Preserve reactivity when destructuring
Wrap a reactive object with toRefs before destructuring so each extracted property stays reactive.
What Interviewer Expects
- That ref works for primitives and objects, reactive only for objects/collections
- The .value access rule and template auto-unwrapping
- Why destructuring a reactive object loses reactivity
- Knowledge of toRefs to bridge reactive objects into refs
- A sensible rule of thumb for choosing between them
Common Mistakes
- Using reactive on a primitive value
- Forgetting .value when reading or writing a ref in script code
- Destructuring a reactive object and expecting it to stay reactive
- Reassigning a whole reactive object instead of mutating properties
- Believing ref cannot hold objects
Best Answer (HR Friendly)
“ref and reactive are two ways to make data reactive in Vue 3. ref works for any single value and you read it through .value, while reactive is for objects whose fields you change directly. A common rule is: use ref for simple values and reactive for grouped object data.”
Code Example
import { ref, reactive, toRefs } from 'vue'
// ref: primitive, accessed via .value
const count = ref(0)
count.value++
// reactive: object, accessed directly
const state = reactive({ user: { name: 'Ada' }, items: [] })
state.user.name = 'Grace'
state.items.push('vue')
// destructuring a reactive object loses reactivity — use toRefs
const { user } = toRefs(state)Follow-up Questions
- Why does destructuring a reactive object break reactivity?
- What does toRefs do and when do you use it?
- Can ref hold an object, and how does it differ from reactive then?
- Why do templates not require .value on refs?
- When would you choose reactive over ref for a form?
MCQ Practice
1. Which can wrap a primitive value to make it reactive?
ref can wrap primitives; reactive only works on objects, arrays and collections.
2. How do you read a ref's value in script code?
In script you access a ref through its .value property; templates unwrap it automatically.
3. What happens when you destructure a reactive object?
Destructuring copies plain values and breaks the Proxy link; toRefs keeps each property reactive.
Flash Cards
What can ref wrap? — Any value — primitives and objects — accessed via .value.
What can reactive wrap? — Only objects, arrays and collections, accessed directly.
How do you access a ref in script? — Through its .value property; templates unwrap it automatically.
How do you destructure reactive safely? — Wrap it with toRefs so each property stays reactive.
Continue Learning
Related Interview Questions
What is the difference between the Options API and the Composition API in Vue?
medium
What is reactivity in Vue and how does the reactivity system work under the hood?
hard
What is the Vue instance and how does the application lifecycle work?
medium
What is Vuex/Pinia and how does centralized state management work in Vue?
medium