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

Question

Accepted Answer

Vue 3's reactivity is built on JavaScript **Proxies**. When you make state reactive, Vue wraps it in a Proxy that **intercepts reads and writes**, lets it **track** which effects depend on which properties, and **triggers** those effects to re-run when the data changes.

## The core mechanism: track on read, trigger on write

```js
// a simplified mental model of reactive()
function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      track(obj, key);          // record "the current effect depends on obj.key"
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      trigger(obj, key);        // re-run every effect that depended on obj.key
      return true;
    },
  });
}
```

Reading a property **tracks** the currently-running effect as a dependency; writing it **triggers** all effects that read it. This is how Vue knows *exactly* which component renders or computeds to update when a specific property changes.

## Effects tie it together

```js
// component render, computed, and watchers all run inside an "effect"
effect(() => {
  document.body.innerHTML = count.value; // reading count.value tracks this effect
});
count.value++; // triggers the effect → it re-runs → DOM updates
```

When an effect runs, Vue marks it as "active" so any reactive reads during it get linked back to it. Change a dependency later, and only the affected effects re-run.

## Why Proxy (Vue 3) beats Object.defineProperty (Vue 2)

```js
// Vue 2 used Object.defineProperty per-property, which COULDN'T detect:
this.obj.newProp = 1;   // ❌ adding a new property (needed Vue.set)
this.arr[0] = 5;         // ❌ index assignment
this.arr.length = 0;     // ❌ length changes

// Vue 3's Proxy intercepts ALL operations, including new keys, deletes, and arrays ✅
```

Proxies intercept the *whole object* (any key, additions, deletions, array mutations), removing Vue 2's well-known caveats — no more `Vue.set` workarounds.

## ref vs reactive internally

```text
reactive(obj) → returns a Proxy of the object
ref(value)    → returns an object { value } whose .value access is tracked
                (so primitives can be reactive — Proxies only wrap objects)
```

## Why it matters

Understanding the track/trigger Proxy model explains *why* Vue is so efficient (it updates only the effects that actually depend on changed data — fine-grained reactivity) and *why* the old Vue 2 limitations existed and are gone in Vue 3.

It also clarifies practical rules: why `reactive` needs objects (Proxies can't wrap primitives, hence `ref`), and why destructuring a `reactive` breaks tracking (you detach the value from the Proxy's get/set interception).