Wie funktioniert Vues 3 Reaktivitätssystem unter der Haube?

Question

IT Interview Practice · Accepted Answer

Vues 3 Reaktivität basiert auf JavaScript **Proxies**. Wenn Sie einen Status reaktiv machen, umhüllt Vue ihn mit einem Proxy, der **Reads und Writes abfängt**, es **verfolgt**, welche Effects von welchen Eigenschaften abhängen, und **triggert** diese Effects, um erneut ausgeführt zu werden, wenn sich die Daten ändern.

## Der Kernmechanismus: track beim Read, trigger beim Write

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

Eine Eigenschaft zu lesen **verfolgt** den aktuell laufenden Effect als eine Abhängigkeit; sie zu schreiben **triggert** alle Effects, die sie lesen. So weiß Vue *genau*, welche Komponenten rendern oder welche Computeds aktualisiert werden müssen, wenn sich eine bestimmte Eigenschaft ändert.

## Effects verbinden alles miteinander

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

Wenn ein Effect läuft, markiert Vue ihn als "aktiv", sodass alle reaktiven Reads während der Ausführung zu ihm zurückverlinkt werden. Ändern Sie später eine Abhängigkeit, werden nur die betroffenen Effects neu ausgeführt.

## Warum Proxy (Vue 3) besser ist als 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 fangen das *ganze Objekt* ab (jeden Key, Hinzufügungen, Löschungen, Array-Mutationen), wodurch die bekannten Einschränkungen von Vue 2 wegfallen – keine `Vue.set` Workarounds mehr nötig.

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

## Warum es wichtig ist

Das Verständnis des track/trigger Proxy-Modells erklärt, *warum* Vue so effizient ist (es aktualisiert nur die Effects, die tatsächlich von geänderten Daten abhängen – Feinkörnige Reaktivität) und *warum* die alten Vue 2 Einschränkungen existierten und in Vue 3 weg sind.

Es macht auch praktische Regeln klarer: warum `reactive` Objekte benötigt (Proxies können Primitive nicht umhüllen, daher `ref`), und warum das Destrukturieren eines `reactive` das Tracking bricht (Sie trennen den Wert von der Proxy-Interception durch get/set).

Der Kernmechanismus: track beim Read, trigger beim Write

Effects verbinden alles miteinander

Warum Proxy (Vue 3) besser ist als Object.defineProperty (Vue 2)

ref vs reactive intern

Warum es wichtig ist

Ähnliche Fragen