¿Cómo funciona el sistema de reactividad de Vue 3 bajo el capó?

Question

Accepted Answer

La reactividad de Vue 3 se construye sobre **Proxies** de JavaScript. Cuando haces un estado reactivo, Vue lo envuelve en un Proxy que **intercepta lecturas y escrituras**, permite **rastrear** qué efectos dependen de qué propiedades, y **dispara** esos efectos para que se ejecuten nuevamente cuando los datos cambian.

## Por qué es importante

```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;
    },
  });
}
```

Leer una propiedad **rastrea** el efecto actualmente en ejecución como una dependencia; escribir la **dispara** todos los efectos que la leen. Así es cómo Vue sabe *exactamente* qué componente renderizar o qué computeds actualizar cuando una propiedad específica cambia.

## Los efectos lo unen todo

```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
```

Cuando se ejecuta un efecto, Vue lo marca como "activo" para que cualquier lectura reactiva durante el mismo se vincule de vuelta a él. Cambia una dependencia después, y solo los efectos afectados se ejecutan nuevamente.

## Por qué Proxy (Vue 3) supera 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 ✅
```

Los Proxies interceptan el *objeto completo* (cualquier clave, adiciones, eliminaciones, mutaciones de array), eliminando las limitaciones conocidas de Vue 2 — adiós a los trucos de `Vue.set`.

## ref vs reactive internamente

```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)
```

## Por qué es importante

Entender el modelo Proxy de rastreo/disparo explica *por qué* Vue es tan eficiente (actualiza solo los efectos que realmente dependen de datos cambiados — reactividad de grano fino) y *por qué* las limitaciones antiguas de Vue 2 existían y han desaparecido en Vue 3.

También aclara reglas prácticas: por qué `reactive` necesita objetos (los Proxies no pueden envolver primitivos, de ahí `ref`), y por qué desestructurar un `reactive` rompe el rastreo (desvinculás el valor de la intercepción get/set del Proxy).