Kako deluje reaktivni sistem Vue 3 pod površino?

Question

Accepted Answer

Reaktivnost Vue 3 je zgrajena na JavaScript **Proxy-jih**. Ko naredite stanje reaktivno, Vue ga zavije v Proxy, ki **prestreza branja in pisanja**, omogoči **sledenje** katerih efektov je odvisnih od katerih lastnosti in **sprozi** te efekte, da se ponovno zaženejo, ko se podatki spremenijo.

## Jedro mehanizma: sledenje pri branju, sproženje pri pisanju

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

Branje lastnosti **sledi** trenutno dejavnemu efektu kot odvisnosti; pisanje **sprozi** vse efekte, ki ga berejo. Tako Vue ve *natančno*, kateri komponenti oz. izračunani vrednosti se morajo posodobiti, ko se določena lastnost spremeni.

## Efekti ga povezujejo skupaj

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

Ko se efekt zažene, Vue ga označi kot "aktiven", zato se vse reaktivne bralne operacije med njim povežejo nazaj na njega. Spremenite odvisnost kasneje, in ponovno se zagnanejo samo prizadeti efekti.

## Zakaj Proxy (Vue 3) prekaša 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 prestrezajo *celoten objekt* (kateri koli ključ, dodajanja, brisanja, mutacije matrik), kar odpravi dobro znane resnice Vue 2 — nič več `Vue.set` obhodov.

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

## Zakaj je to pomembno

Razumevanje modela track/trigger Proxy pojasnjuje, *zakaj* je Vue tako učinkovit (posodablja samo efekte, ki je res odvisni od spremenjenih podatkov — finega zrnatosti reaktivnost) in *zakaj* so stare Vue 2 omejitve obstajale in jih ni več v Vue 3.

To tudi pojasnjuje praktična pravila: zakaj `reactive` potrebuje objekte (Proxies ne morejo zaviti primitivov, zato `ref`), in zakaj razstrukturiranje `reactive` prekine sledenje (odtrgano vrednost od get/set prestrezanja Proxy-ja).