Hoe werkt het reactivitysysteem van Vue 3 onder de motorkap?

Question

Accepted Answer

Vue 3's reactiviteit is gebouwd op JavaScript **Proxies**. Wanneer je state reactief maakt, verpakt Vue het in een Proxy die **leesbewerkingen en schrijfbewerkingen onderschept**, hiermee **bijhoudt** welke effecten afhangen van welke eigenschappen, en **activeert** die effecten opnieuw wanneer de gegevens veranderen.

## Waarom het belangrijk is: afhankelijkheden bijhouden bij lezen, activeren bij schrijven

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

Een eigenschap lezen **houdt bij** of het momenteel actieve effect als een afhankelijkheid; het schrijven **activeert** alle effecten die ervan afhangen. Op deze manier weet Vue *precies* welke component moet renderen of welke computeds moeten worden bijgewerkt wanneer een specifieke eigenschap verandert.

## Effecten brengen het samen

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

Wanneer een effect wordt uitgevoerd, markeert Vue het als 'actief' zodat alle reactieve leesbewerkingen ervan terugkoppelen naar dit effect. Wijzig later een afhankelijkheid, en alleen de beïnvloede effecten worden opnieuw uitgevoerd.

## Waarom Proxy (Vue 3) beter is dan 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 onderscheppen het *gehele object* (elke sleutel, toevoegingen, verwijderingen, array-mutaties), waardoor Vue 2's bekende beperkingen verdwijnen — geen `Vue.set` workarounds meer nodig.

## ref versus reactive intern

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

## Waarom het belangrijk is

Begrip van het track/trigger Proxy-model verklaart *waarom* Vue zo efficiënt is (het werkt alleen de effecten bij die echt afhangen van gewijzigde gegevens — fine-grained reactiviteit) en *waarom* de oude Vue 2-beperkingen bestonden en verdwenen zijn in Vue 3.

Het verduidelijkt ook praktische regels: waarom `reactive` objecten nodig heeft (Proxies kunnen primitieven niet omwikkelen, vandaar `ref`), en waarom destructurering van een `reactive` tracking verbreekt (je ontkoppelt de waarde van de get/set-onderschepping van de Proxy).