Jak działa system reaktywności Vue 3 pod maską?

Question

Accepted Answer

Reaktywność Vue 3 jest zbudowana na **Proxy** JavaScript. Kiedy tworzysz state reaktywny, Vue owija go w Proxy, który **przechwytuje odczyty i zapisy**, pozwala **śledzić**, które efekty zależą od których właściwości, i **wyzwala** te efekty, aby uruchomić się ponownie, gdy dane się zmienią.

## Dlaczego to ważne

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

Odczytanie właściwości **śledzi** aktualnie uruchamiany efekt jako zależność; wpisanie jej **wyzwala** wszystkie efekty, które ją odczytują. W ten sposób Vue wie *dokładnie*, który komponent ma się renderować lub które computed muszą zostać zaktualizowane, gdy zmieni się określona właściwość.

## Efekty łączą wszystko razem

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

Kiedy efekt się uruchamia, Vue oznacza go jako "aktywny", aby wszelkie reaktywne odczyty podczas jego działania zostały do niego powiązane. Zmień zależność później, a tylko dotknięte efekty uruchomią się ponownie.

## Dlaczego Proxy (Vue 3) przebija 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 przechwytują *całe obiekty* (każdy klucz, dodania, usunięcia, mutacje tablic), eliminując dobrze znane zastrzeżenia Vue 2 — nie ma już obejść `Vue.set`.

## ref vs reactive wewnętrznie

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

## Dlaczego to ważne

Zrozumienie modelu Proxy track/trigger wyjaśnia *dlaczego* Vue jest tak wydajne (aktualizuje tylko efekty, które rzeczywiście zależą od zmienionych danych — fine-grained reactivity) i *dlaczego* stare ograniczenia Vue 2 istniały i zniknęły w Vue 3.

Zasadniczo wyjaśnia praktyczne reguły: dlaczego `reactive` potrzebuje obiektów (Proxy nie mogą zapakowywać prymitywów, stąd `ref`), i dlaczego destrukturyzacja `reactive` przerywa śledzenie (odłączasz wartość od przechwytywania get/set proxy).

Dlaczego to ważne

Efekty łączą wszystko razem

Dlaczego Proxy (Vue 3) przebija Object.defineProperty (Vue 2)

ref vs reactive wewnętrznie

Dlaczego to ważne

question.related