How does Vue 3's reactivity system work, and how does it differ from Vue 2's?

Summary

Vue 3 wraps objects in JavaScript Proxies: reading a property inside an effect (a component render, computed, watchEffect) records a dependency (track), and writing the property re-runs the effects that depend on it (trigger). Vue 2 used Object.defineProperty getters and setters, which could not detect added or deleted properties or array index assignments.

Longer Answer

In Vue 2 you needed Vue.set(obj, 'newKey', value) and array mutation methods because obj.newKey = 1 and arr[0] = x were invisible to reactivity. Proxies intercept all of these, plus Map, Set, in and delete, so Vue 3 removed Vue.set/Vue.delete.

Dependencies are tracked per property, so updates are fine-grained: changing user.name only re-renders components that read user.name. Effects are batched and applied asynchronously before the next paint, which is why nextTick() is needed to read the updated DOM.

Key Points

• Proxies: track on read, trigger on write.
• Vue 2 defineProperty missed new keys/array indexes.
• Fine-grained per-property dependencies.
• Batched async updates; nextTick.

What interviewers look for

Understanding of track/trigger and the Vue 2 caveats it removed.