Jak funguje reaktivní systém Vue 3 pod kapotou?

Question

Accepted Answer

Reaktivita Vue 3 je postavena na JavaScriptu **Proxies**. Když uděláte stav reaktivní, Vue jej zabalí do Proxy, který **zachycuje čtení a zápisy**, umožňuje **sledovat**, které efekty závisí na kterých vlastnostech, a **spouští** ty efekty k opětovnému spuštění, když se data změní.

## Základní mechanismus: sledovat při čtení, spouštět při zápisu

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

Čtení vlastnosti **sleduje** právě běžící efekt jako závislost; zápis ji **spouští** všechny efekty, které ji čtou. Tímto způsobem Vue ví *přesně*, která komponenta se má znovu vykreslit nebo jaké computed hodnoty se mají aktualizovat, když se změní určitá vlastnost.

## Efekty to spojují dohromady

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

Když se efekt spustí, Vue jej označí jako "aktivní" tak, aby jakékoliv reaktivní čtení během něj bylo propojeno s ním. Později změňte závislost a pouze ovlivněné efekty se znovu spustí.

## Proč Proxy (Vue 3) porazí 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 zachycují *celý objekt* (jakýkoliv klíč, přidání, odstranění, mutace pole), čímž odstraňují známé poznatky Vue 2 — již žádné workaroundy `Vue.set`.

## ref vs reactive interně

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

## Proč je to důležité

Pochopení track/trigger Proxy modelu vysvětluje *proč* je Vue tak efektivní (aktualizuje pouze efekty, které skutečně závisí na změněných datech — jemně zraněná reaktivita) a *proč* staré omezení Vue 2 existovalo a je pryč v Vue 3.

Takéto objasňuje praktická pravidla: proč `reactive` potřebuje objekty (Proxies nemohou zabalit primitivy, proto `ref`), a proč destrukturování `reactive` přerušuje sledování (odpojíte hodnotu od get/set zachycení Proxy).