Cum funcționează sistemul de reactivitate al Vue 3 în spatele cortinei?

Question

Accepted Answer

Reactivitatea Vue 3 este construită pe **Proxies** JavaScript. Când faci starea reactivă, Vue o înfășoară într-un Proxy care **interceptează citiri și scrieri**, te lasă să **urmărești** ce efecte depind de ce proprietăți și **declanșează** acele efecte pentru a se reexecuta când datele se schimbă.

## Mecanismul principal: urmărire la citire, declanșare la scriere

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

Citirea unei proprietăți **urmărește** efectul în execuție curentă ca o dependență; scrierea în ea **declanșează** toate efectele care o citesc. Acesta este modul în care Vue știe *exact* ce componentă să redea sau ce computeds să actualizeze atunci când o anumită proprietate se schimbă.

## Efectele le leagă pe toate

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

Când un efect se execută, Vue îl marchează ca "activ" pentru ca orice citire reactivă în timpul executării acestuia să fie conectată înapoi la acesta. Schimbă o dependență mai târziu, iar doar efectele afectate se reexecută.

## De ce Proxy (Vue 3) depășește 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 interceptează *întregul obiect* (orice cheie, adunări, ștergeri, mutații de tablouri), eliminând limitările binecunoscute ale Vue 2 — nu mai sunt necesare ocolisuri `Vue.set`.

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

## De ce este important

Înțelegerea modelului Proxy track/trigger explică *de ce* Vue este atât de eficient (actualizează doar efectele care depind de fapt de datele modificate — reactivitate cu granulație fină) și *de ce* limitările vechi ale Vue 2 au existat și au dispărut în Vue 3.

Clarifică, de asemenea, reguli practice: de ce `reactive` necesită obiecte (Proxies nu pot înfășura primitive, de unde și `ref`), și de ce destrămarea unui `reactive` întrerupe urmărirea (detașezi valoarea de interceptarea get/set a Proxy-ului).