Hur fungerar Vue 3:s reaktivitetssystem under huven?

Question

Accepted Answer

Vue 3:s reaktivitet är byggd på JavaScript **Proxies**. När du gör tillståndet reaktivt omsluter Vue det i en Proxy som **fångar läsningar och skrivningar**, låter **spåra** vilka effekter som är beroende av vilka egenskaper och **utlöser** dessa effekter för att köras på nytt när data ändras.

## Kärnmekanismen: spåra vid läsning, utlös vid skrivning

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

Läsning av en egenskap **spårar** den för närvarande aktiva effekten som ett beroende; skrivning **utlöser** alla effekter som läser den. Det är hur Vue vet *exakt* vilka komponenter eller beräknade värden som måste uppdateras när en specifik egenskap ändras.

## Effekter binder ihop det

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

När en effekt körs markerar Vue den som "aktiv" så att alla reaktiva läsningar under den länkas tillbaka till den. Ändra ett beroende senare, och bara de påverkade effekterna körs på nytt.

## Varför Proxy (Vue 3) slår 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 fångar *hela objektet* (valfri nyckel, tillägg, borttagning, arraymuteringar), vilket tar bort Vue 2:s välkända begränsningar — ingen fler `Vue.set`-omvägar.

## ref mot reactive internt

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

## Varför det spelar roll

Att förstå track/trigger Proxy-modellen förklarar *varför* Vue är så effektivt (det uppdaterar bara effekterna som faktiskt beror på ändrade data — finkorning reaktivitet) och *varför* gamla Vue 2-begränsningar fanns och är borta i Vue 3.

Det klargör också praktiska regler: varför `reactive` behöver objekt (Proxies kan inte omsluta primitiva värden, därför `ref`), och varför destrukturering av `reactive` bryter spårning (du kopplar loss värdet från Proxy:ns get/set-fångst).