How does reactivity work in Vue 3 with Proxy?
Assesses fundamental understanding of Vue.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Vue 3 wraps reactive objects in an ES Proxy that intercepts get and set operations. On a get, track() records the currently active effect (a render function, computed or watcher) into a dependency map keyed by the target and property. On a set, trigger() looks up that map and re-runs the dependent effects.
const state = reactive({ count: 0 });
effect(() => console.log(state.count));
state.count++; // get, then set -> effect re-runs
Because the Proxy is lazy, nested objects are only wrapped when accessed, keeping initialisation cheap. ref() stores a value in a .value property and uses the same tracking internally, so primitives work too. Effects are batched into a microtask queue, so several synchronous mutations produce a single update.
Caveats: proxies cannot detect property additions on a raw object if you bypass the wrapper, reassigning a ref replaces its value, and markRaw or shallowRef skip deep conversion. This design is why Vue 3 tracks added and deleted keys correctly, unlike Vue 2's Object.defineProperty approach.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.