Hogyan működik a Vue 3 reaktivitási rendszere a motorháztető alatt?

Question

Accepted Answer

A Vue 3 reaktivitása JavaScript **Proxykon** alapul. Ha az állapotot reaktívvá teszi, a Vue egy Proxybe csomagolja, amely **elfogja az olvasásokat és írásokat**, lehetővé teszi az **nyomon követést**, hogy mely effektusok mely tulajdonságoktól függenek, és **aktivál** azokat az effektusokat, hogy újrafussanak, amikor az adatok megváltoznak.

## Miért fontos

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

Egy tulajdonság olvasása **követi** az aktuálisan futó effektust függőségként; az írása **aktiválja** az összes olyan effektust, amely azt olvassa. Így tudja a Vue, hogy *pontosan* melyik komponenst kell renderelni vagy mely kiszámítottakat kell frissíteni, amikor egy adott tulajdonság megváltozik.

## Az effektusok összekapcsolják azt

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

Ha egy effektus fut, a Vue "aktívnak" jelöli, így az alatt végzett bármely reaktív olvasás visszakapcsolódik hozzá. Később módosítson egy függőséget, és csak az érintett effektusok futnak újra.

## Miért jobb a Proxy (Vue 3) az Object.defineProperty-nél (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 ✅
```

A Proxyk az *egész* objektumot elfogják (bármilyen kulcs, kiegészítések, törlések, tömbmutációk), eltávolítva Vue 2 jól ismert korlátait — nincs többé szükség `Vue.set` megkerülésekre.

## ref vs reaktív belsőleg

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

A track/trigger Proxy modell megértése megmagyarázza, *miért* olyan hatékony a Vue (csak azokat az effektusokat frissíti, amelyek valóban a megváltozott adatoktól függenek — finomra szabott reaktivitás) és *miért* voltak a régi Vue 2 korlátozások, és miért tűntek el a Vue 3-ban.

Ez tisztázza a gyakorlati szabályokat is: miért szükséges a `reactive` objektumokhoz (Proxyk nem tudnak primitíveket becsomagolni, ezért a `ref`), és miért szünteti meg a `reactive` dekonstruálása a nyomon követést (leválasztod az értéket a Proxy get/set elfogásából).