Hvordan fungerer Vue 3s reactivitetssystem under panelet?

Question

Accepted Answer

Vue 3s reaksjonssystem er bygget på JavaScript **Proxies**. Når du gjør state reaktiv, omslutter Vue det i en Proxy som **avskjærer lesinger og skriving**, lar den **spore** hvilke effekter som avhenger av hvilke egenskaper, og **utløser** disse effektene når dataene endres.

## Kjernemekanismen: spor ved lesing, utløs ved skriving

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

Lesing av en egenskap **sporer** den kjørende effekten som en avhengighet; skriving til den **utløser** alle effekter som leser den. Dette er hvordan Vue vet *nøyaktig* hvilken komponent som skal gjengi eller beregnet egenskaper som skal oppdateres når en bestemt egenskap endres.

## Effekter binder 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 kjøres, merker Vue den som "aktiv" slik at eventuelle reaktive lesinger under kjøringen blir knyttet tilbake til den. Endre en avhengighet senere, og bare de berørte effektene kjøres på nytt.

## 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 avskjærer *hele objektet* (enhver nøkkel, tillegg, slettinger, array-mutasjoner), og fjerner Vue 2s velkjente ulemper — ikke lenger behov for `Vue.set` workarounds.

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

## Hvorfor det er viktig

Å forstå spor/utløs Proxy-modellen forklarer *hvorfor* Vue er så effektivt (det oppdaterer bare de effektene som faktisk avhenger av endrede data — fine-grained reactivitet) og *hvorfor* de gamle Vue 2-begrensningene eksisterte og er borte i Vue 3.

Det avklarer også praktiske regler: hvorfor `reactive` trenger objekter (Proxies kan ikke pakke inn primitiver, derav `ref`), og hvorfor destrukturering av en `reactive` bryter sporing (du frikobler verdien fra Proxys get/set-avskjæring).