Si funksionon sistemi i reaktivitetit të Vue 3 nën sipërfaqe?

Question

Accepted Answer

Reaktiviteti i Vue 3 ndërtohet mbi JavaScript **Proxies**. Kur e bëni gjendjën reaktive, Vue e mbërthen në një Proxy që **ndërpret lexime dhe shkritime**, lejon **ndjekjen** e efekteve të varura nga cilat prona dhe **aktivizon** ato efekte për t'u xhiruar përsëri kur të dhënat ndryshojnë.

## Mekanizmi bërthamor: ndjekje në lexim, aktivizim në shkim

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

Leximi i një prona **ndjek** efektin aktualisht në ekzekutim si një varësi; shkrimi **aktivizon** të gjithë efektet që e lexojnë. Kështu Vue e di *saktësisht* cilat komponentë ose llogaritje duhet të përditësohen kur ndryshon një pronë specifike.

## Efektet e lidhin së bashku

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

Kur një efekt ekzekutohet, Vue e shënon si "aktiv" kështu që çdo lexim reaktiv gjatë tij lidhet përsëri me të. Ndryshoni një varësi më vonë, dhe vetëm efektet e prekur do të ekzekutohen përsëri.

## Pse Proxy (Vue 3) kalbin 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 ndërprenin *objektin e tëmë* (çdo çelës, shtesa, fshirje, mutacione vargu), duke hequr këndvështime të njohura të Vue 2 — nuk ka më rrugëzimet `Vue.set`.

## ref kundër reactive nga brenda

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

## Pse është e rëndësishme

Përkuptimi i modelit track/trigger Proxy shpjegon *pse* Vue është kaq efikas (përditëson vetëm efektet që vërtet varen nga të dhënat e ndryshuar — reaktivitet me kokërr të imët) dhe *pse* kufizimet e vjetra të Vue 2 ekzistonin dhe janë të përfunduar në Vue 3.

Zhvillohet gjithashtu rregullat praktike: pse `reactive` ka nevojë për objekte (Proxies nuk mund të mbërthenin primitiva, prandaj `ref`), dhe pse dekonstruktimi i `reactive` thyen ndjekjen (ju detachon vlerën nga ndërprerja get/set të Proxy-s).