Comment fonctionne le système de réactivité de Vue 3 sous le capot ?

Question

Accepted Answer

La réactivité de Vue 3 repose sur les **Proxies** JavaScript. Quand vous rendez l'état réactif, Vue l'enveloppe dans un Proxy qui **intercepte les lectures et écritures**, permet de **tracker** quels effets dépendent de quelles propriétés, et **déclenche** ces effets pour qu'ils se réexécutent quand les données changent.

## Pourquoi c'est important

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

Lire une propriété **track** l'effet actuellement en cours d'exécution comme dépendance ; l'écrire **trigger** tous les effets qui la lisent. C'est comme ça que Vue sait *exactement* quel composant rendre ou quels computeds mettre à jour quand une propriété spécifique change.

## Les effets lient tout ensemble

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

Quand un effet s'exécute, Vue le marque comme « actif » de sorte que toute lecture réactive pendant celui-ci se lie à lui. Changez une dépendance plus tard, et seuls les effets affectés se réexécutent.

## Pourquoi Proxy (Vue 3) bat 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 ✅
```

Les Proxies interceptent l'*objet entier* (n'importe quelle clé, ajouts, suppressions, mutations de tableau), éliminant les limitations bien connues de Vue 2 — plus besoin de contournements `Vue.set`.

## ref vs reactive en interne

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

Comprendre le modèle Proxy track/trigger explique *pourquoi* Vue est si efficace (il met à jour uniquement les effets qui dépendent réellement des données changées — réactivité à grain fin) et *pourquoi* les anciennes limitations de Vue 2 existaient et ont disparu dans Vue 3.

Cela clarifie aussi les règles pratiques : pourquoi `reactive` nécessite des objets (les Proxies ne peuvent pas envelopper les primitives, d'où `ref`), et pourquoi la déstructuration d'un `reactive` casse le tracking (vous détachez la valeur de l'interception get/set du Proxy).