Miten Vue 3:n reaktiivisuusjärjestelmä toimii taustalla?

Question

Accepted Answer

Vue 3:n reaktiivisuus on rakennettu JavaScript **Proxies** -pohjalle. Kun teet tilasta reaktiivisen, Vue käärii sen Proxy:hin, joka **sieppaa lukemisen ja kirjoituksen**, antaa **seurata** mitkä efektit riippuvat mistä ominaisuuksista, ja **laukaisee** nuo efektit uudelleen kun data muuttuu.

## Ydinmekanismi: seurata luettaessa, laukaista kirjoitettaessa

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

Ominaisuuden lukeminen **seuraa** tällä hetkellä käynnissä olevaa efektiä riippuvuutena; siihen kirjoittaminen **laukaisee** kaikki efektit, jotka sitä lukevat. Näin Vue tietää *tarkalleen*, mitä komponenttia renderöidään tai mitä computedeja päivitetään kun tietty ominaisuus muuttuu.

## Efektit sitovat sen yhteen

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

Kun efekti ajetaan, Vue merkitsee sen "aktiiviseksi" niin, että mikä tahansa reaktiivinen luku sen aikana linkittyy takaisin siihen. Muuta riippuvuutta myöhemmin, ja vain vaikutuksen alaiset efektit ajetaan uudelleen.

## Miksi Proxy (Vue 3) voittaa Object.defineProperty:n (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 ✅
```

Proxyt sieppaavat *koko objektin* (mikä tahansa avain, lisäykset, poistot, taulukon mutaatiot), poistaen Vue 2:n tunnetut varoitukset — ei enää `Vue.set` -ratkaisuja.

## ref vs reactive sisäisesti

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

## Miksi se on tärkeää

track/trigger Proxy -mallin ymmärtäminen selittää *miksi* Vue on niin tehokas (se päivittää vain efektit, jotka todella riippuvat muuttuneista tiedoista — hienorakeinen reaktiivisuus) ja *miksi* vanhat Vue 2 -rajoitukset olivat olemassa ja ovat poissa Vue 3:ssa.

Se myös selventää käytännön sääntöjä: miksi `reactive` tarvitsee objekteja (Proxyt eivät voi kääriä primitiivejä, siis `ref`), ja miksi `reactive`:n destrukturointi rikkoo seurannan (irrotat arvon Proxyn get/set-sieppauksesta).