Vue 3 Reactivity: Why Proxy Replaced defineProperty

Vue 2 implemented reactivity with Object.defineProperty. At component creation, Vue walked every property of the data object and replaced it with a getter/setter pair that called dep.depend() on read and dep.notify() on write. This works but has concrete problems. First, it can't detect adding or deleting a property — this.user.age = 20 when age didn't exist originally does nothing reactive. Second, it can't intercept array index mutations like arr[0] = x or arr.length = 0, so Vue 2 patches seven array methods to manually trigger updates. Third, it has to recursively walk the entire data tree at creation time, which is expensive for large nested state. Vue 3 uses Proxy, a JavaScript feature that wraps an object with a handler intercepting every operation — get, set, has, deleteProperty, ownKeys. You don't pre-convert anything. The Proxy handler's get trap calls track(target, key) to record "the current active effect depends on this property". The set trap calls trigger(target, key) to notify all effects that tracked this property. Property addition, deletion, array index writes, and Map/Set mutations are all captured naturally. Proxies are also lazy — the top-level object is wrapped, and only when you access a nested property does Vue wrap that nested value in another Proxy and return it, so you pay the cost of reactivity only on touched paths. This is huge for large state trees. The two primary APIs: reactive(obj) wraps an object and returns a Proxy. ref(value) is for primitives — since you can't proxy a primitive, ref returns { value: primitive } wrapped in a reactive-like object, so accessing .value is intercepted. In templates, Vue unwraps refs automatically, which is why you don't write .value in JSX / template but do write it in script setup. track() and trigger() are the two function primitives underneath computed, watch, and the render effect — all of them internally are effect()s that register during reads and re-run on writes.