Hvordan fungerer Vue 3's reaktivitetssystem under motorhjelmen?

Question

Accepted Answer

Vue 3's reaktivitet er bygget på JavaScript **Proxies**. Når du gør staten reaktiv, pakker Vue den ind i en Proxy, der **opfanger læsninger og skrivninger**, lader det **spore** hvilke effekter der afhænger af hvilke egenskaber, og **udløser** disse effekter til at køre igen, når dataene ændres.

## Kernemekanismen: spor ved læsning, udløs ved 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 af en egenskab **sporer** den kørende effekt som en afhængighed; skrivning udløser **alle effekter, der læser den. Dette er, hvordan Vue ved *præcis*, hvilken komponent, der skal gengives eller computeds skal opdateres, når en bestemt egenskab ændres.

## Effekter bindes det sammen

```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øres, markerer Vue den som "aktiv", så enhver reaktiv læsning under den får knyttet tilbage til den. Ændrer en afhængighed senere, og kun de påvirkede effekter køres igen.

## Hvorfor 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 opfanger *hele objektet* (enhver nøgle, tilføjelser, sletninger, array-mutationer), hvilket fjerner Vue 2's velkendte forbehold — ikke længere `Vue.set`-løsninger.

## ref vs 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)
```

## Hvorfor det betyder noget

At forstå track/trigger Proxy-modellen forklarer *hvorfor* Vue er så effektiv (det opdaterer kun effekter, der faktisk afhænger af ændrede data — finmasket reaktivitet) og *hvorfor* de gamle Vue 2-begrænsninger eksisterede og er væk i Vue 3.

Det præciserer også praktiske regler: hvorfor `reactive` har brug for objekter (Proxies kan ikke pakke primitiver, derfor `ref`), og hvorfor destrukturering af `reactive` bryder sporing (du afkobler værdien fra Proxy's get/set-opfangning).