Kako Vue 3 sustav reaktivnosti funkcionira ispod haube?

Question

Accepted Answer

Reaktivnost Vue 3 je izgrađena na JavaScript **Proxyima**. Kada učinio state reaktivnim, Vue ga omotava u Proxy koji **presreće čitanja i pisanja**, omogućava **praćenje** koji effecti ovise o kojima svojstvima, i **aktivira** te effecte da se ponovno pokrenu kada se podaci promijene.

## Zašto je to važno

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

Čitanje svojstva **prati** trenutno izvršavani effect kao ovisnost; pisanje u njega **aktivira** sve effecte koji ga čitaju. Ovako Vue zna *točno* koju komponentu renderirati ili koje computede ažurirati kada se određeno svojstvo promijeni.

## Effecti to sve vezuju

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

Kada se effect pokreće, Vue ga označava kao "aktivnog" kako bi se bilo koje reaktivno čitanje tijekom njega vezalo na njega. Kasnije promijenite ovisnost, i samo pogođeni effecti se ponovno pokreću.

## Zašto Proxy (Vue 3) nadmašuje 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 ✅
```

Proxiji presreću *cijeli* objekt (bilo koji ključ, dodaci, brisanja, mutacije niza), uklanjajući dobro poznate nedostatke Vue 2 — nema više potrebe za `Vue.set` zaobilaznicama.

## ref vs reactive interno

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

Razumijevanje track/trigger Proxy modela objašnjava *zašto* je Vue toliko učinkovit (ažurira samo effecte koji zapravo ovise o promijenjenim podacima — fine-grained reaktivnost) i *zašto* su stara Vue 2 ograničenja postojala i nestala u Vue 3.

Također pojašnjava praktična pravila: zašto `reactive` trebam objekte (Proxiji ne mogu umotati primitivce, stoga `ref`), i zašto dekonstruiranje `reactive` prekida praćenje (odvajate vrijednost od Proxyjevih get/set presretanja).