Kif taħdem is-sistema ta' reaktività ta' Vue 3 taħt il-wiċċ?

Question

Accepted Answer

Ir-reaktività ta' Vue 3 hija binjata fuq JavaScript **Proxies**. Meta tagħmel l-istat reattiv, Vue idum f'Proxy li **għaddaqx il-qari u l-kitba**, ippermettikx **imordu** liema effetti dipendi fuq liema proprjetajiet, u **attivaw** dawn l-effetti biex jitxeggħu mill-ġdid meta l-data tbiddel.

## Il-mekkaniżmu ewlieni: mordu fuq il-qari, attiva fuq il-kitba

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

L-qari ta' proprjetà **mordu** l-effett li qed jaħdem attwalment bħala dipendenza; il-kitba **attiva** l-effetti kollha li jaqruhom. Din hija kif Vue taf *preċiżament* liema komponent għandha tingħata jew liema computed għandha tiddaħħal meta proprjetà speċifika tbiddel.

## L-effetti jgħaqqdu kollox

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

Meta effett jaħdem, Vue jissegnaha bħala "attiva" biex kwalunkwe qari reattiv matul dik ix-xogħol jerġa' jingħaqad miegħu. Biddel dipendenza aktar tard, u biss l-effetti affettwati jerġgħu jaħdmu.

## Għaliex Proxy (Vue 3) aħjar minn 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 għaddaqx il-*ġibjun kollu* (xi ħlastel, żieda, ħذerif, mutazjonijiet ta' array), tneħħi l-każwi magħrufa ta' Vue 2 — għal-tul ebda workarounds `Vue.set` aktar.

## ref vs reactive internament

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

## Għaliex dan importanti

L-għarif tal-mudell Proxy mordu/attiva jispjega *għaliex* Vue hija tant effiċjenti (taġġorna biss l-effetti li tabilħaqq dipendi fuq data mibdula — reaktività fin-grana) u *għaliex* il-limitazzjonijiet antiki ta' Vue 2 kienu jeżistu u mhux preżenti f' Vue 3.

Tispjega wkoll ir-regoli prattiċi: għaliex `reactive` għandu bżonn oġġetti (Proxies ma jistgħux jdumu l-primitives, għaldaqsa `ref`), u għaliex id-destruzzjoni ta' `reactive` tinqasam il-morda (inti tnixxel il-valur mill-interceptazzjoni get/set tal-Proxy).