How does Vue 3's reactivity system work under the hood?

Vue 3 uses ES6 Proxy objects to intercept property access (get) and mutation (set). When a reactive property is read inside a rendering or computed context, Vue tracks that as a dependency. When the property is later mutated, Vue triggers a re-run of any effects (renders, computed getters, watchers) that depend on it.

This differs from Vue 2's Object.defineProperty-based getters/setters, which couldn't detect new property additions or array index/length changes without workarounds like Vue.set. Because Proxy wraps the entire object, Vue 3 can react to those cases natively.