What is reactivity in Vue and how does the reactivity system work under the hood?
Learn how Vue reactivity works: Proxies track which effects read each property and re-run them on change, automatically keeping the DOM in sync with state.
Expected Interview Answer
Reactivity in Vue is the system that automatically updates the DOM whenever the state it depends on changes; Vue 3 implements it with JavaScript Proxies that track which effects read each property and re-run those effects when the property is written.
When a component renders, Vue runs a reactive effect that reads state; the Proxy's get trap records this dependency, linking the property to the effect. When a property is later mutated, the set trap looks up the tracked effects and triggers them, so the render effect runs again and patches the DOM. Vue 3 uses Proxies instead of Vue 2's Object.defineProperty, which lets it detect property additions, deletions and array index changes without special helpers.
- State changes update the DOM automatically with no manual wiring
- Proxies catch property add/delete and array mutations Vue 2 missed
- Fine-grained dependency tracking re-runs only affected effects
- The same track/trigger engine powers computed and watchers
- Enables efficient, targeted updates instead of full re-renders
AI Mentor Explanation
Reactivity is like a live scoreboard wired to the umpire's signals. Every display panel that reads the runs total registers itself as a subscriber to that number. The moment a boundary changes the runs, the system knows exactly which panels showed runs and refreshes only those, leaving the overs and wickets displays untouched — targeted updates driven by who was actually watching each value.
Step-by-Step Explanation
Step 1
Wrap state in a Proxy
reactive() returns a Proxy around an object; ref() wraps a value in an object whose .value is reactive.
Step 2
Run a reactive effect
Rendering, computed and watchers run inside effects that read reactive state during execution.
Step 3
Track on read (get trap)
The Proxy's get trap records that the currently running effect depends on the property being read.
Step 4
Trigger on write (set trap)
The set trap looks up the effects tracked for that property and schedules them to re-run.
Step 5
Re-run and patch
The render effect runs again, produces a new virtual DOM, and Vue patches only the changed parts of the real DOM.
What Interviewer Expects
- Understanding that reactivity links state to DOM updates automatically
- Knowledge that Vue 3 uses Proxies while Vue 2 used Object.defineProperty
- The track-on-get and trigger-on-set dependency model
- Awareness that effects, computed and watchers share this engine
- Why Proxies fixed Vue 2's add/delete and array-index limitations
Common Mistakes
- Saying Vue re-renders the whole app on every state change
- Confusing Vue 3 Proxies with Vue 2's Object.defineProperty approach
- Forgetting that ref values must be accessed via .value in script
- Claiming destructuring a reactive object keeps its reactivity
- Thinking reactivity works on plain, non-wrapped variables
Best Answer (HR Friendly)
“Reactivity means Vue automatically updates what you see on screen whenever the underlying data changes. Under the hood, Vue watches which pieces of data each part of the page uses, and when a value changes it refreshes only the parts that depended on it, so updates are fast and automatic.”
Code Example
import { reactive, watchEffect } from 'vue'
const state = reactive({ count: 0 })
// This effect reads state.count, so it subscribes to it
watchEffect(() => {
console.log('count is', state.count)
})
state.count++ // set trap triggers the effect to re-runconst deps = new Map()
let activeEffect = null
function track(key) {
if (activeEffect) {
if (!deps.has(key)) deps.set(key, new Set())
deps.get(key).add(activeEffect)
}
}
function trigger(key) {
deps.get(key)?.forEach(effect => effect())
}Follow-up Questions
- Why did Vue 3 switch from Object.defineProperty to Proxy?
- What happens to reactivity when you destructure a reactive object?
- How do computed properties cache using this system?
- What is the difference between watch and watchEffect?
- How does toRefs help preserve reactivity?
MCQ Practice
1. What mechanism powers Vue 3's reactivity system?
Vue 3 uses Proxies to intercept reads and writes, replacing Vue 2's Object.defineProperty approach.
2. When is a dependency between an effect and a property recorded?
The get trap tracks the dependency at read time, linking the currently running effect to that property.
3. Which limitation did Proxies fix compared to Vue 2?
Proxies intercept any property access including new keys and array indices, which Object.defineProperty could not track without helpers.
Flash Cards
What is reactivity in Vue? — Automatic DOM updates when the state a view depends on changes.
What powers Vue 3 reactivity? — JavaScript Proxies with get (track) and set (trigger) traps.
What does the get trap do? — Records that the active effect depends on the property being read.
What does the set trap do? — Re-runs the effects tracked for the property that was written.