Come funziona il sistema di reattività di Vue 3 sotto il cofano?

Question

Accepted Answer

La reattività di Vue 3 è costruita su JavaScript **Proxies**. Quando rendi lo stato reattivo, Vue lo racchiude in un Proxy che **intercetta letture e scritture**, ti permette di **tracciare** quali effetti dipendono da quali proprietà, e **attiva** quegli effetti per farli rieseguire quando i dati cambiano.

## Meccanismo core: traccia in lettura, attiva in scrittura

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

Leggere una proprietà **traccia** l'effetto attualmente in esecuzione come una dipendenza; scriverla **attiva** tutti gli effetti che la leggono. Così Vue sa *esattamente* quali componenti renderizzare o quali computeds aggiornare quando una proprietà specifica cambia.

## Gli effetti tengono tutto insieme

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

Quando un effetto si esegue, Vue lo segna come "attivo" così tutte le letture reattive durante l'esecuzione rimangono collegate ad esso. Cambia una dipendenza più tardi, e solo gli effetti interessati si rieseguono.

## Perché Proxy (Vue 3) batte 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 ✅
```

I Proxy intercettano l'*intero oggetto* (qualsiasi chiave, aggiunte, cancellazioni, mutazioni di array), eliminando i ben noti caveat di Vue 2 — niente più workaround `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)
```

## Perché è importante

Comprendere il modello Proxy di tracciamento/attivazione spiega *perché* Vue è così efficiente (aggiorna solo gli effetti che effettivamente dipendono dai dati cambiati — reattività a grana fine) e *perché* le vecchie limitazioni di Vue 2 esistevano e sono sparite in Vue 3.

Chiarisce anche regole pratiche: perché `reactive` ha bisogno di oggetti (i Proxy non possono racchiudere primitive, quindi `ref`), e perché destrutturare un `reactive` interrompe il tracciamento (stacchi il valore dall'intercettazione get/set del Proxy).