Mfumo wa athari ya Vue 3 unafanya kazi vipi chini ya uso?

Question

Accepted Answer

Athari ya Vue 3 inajengwa kwa JavaScript **Proxies**. Wakati wa kutengeneza hali kuwa na athari, Vue inaiweka katika Proxy inayokatiza **kusoma na kuandika**, inaruhusu **kufuatilia** ni athari gani zinategemea mali gani, na **kuandika** athari hizo kuendesha tena wakati data inabadilika.

## Utaratibu wa msingi: fuatilia kwenye kusoma, andika kwenye kuandika

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

Kusoma mali **kunafuatilia** athari inayoendesha sasa kama utegemezi; kuandika **kunaandika** athari zote zinazoisoma. Hii ndio jinsi Vue inajua *mahali pazuri* ni sehemu gani au maadili yanayohesabiwa yanayoandikwa wakati mali mahususi inabadilika.

## Athari zinaliunganisha pamoja

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

Wakati athari inaendesha, Vue inaiweka kama "imara" kwa hivyo kusoma kunarejelea kuendesha athari zote muundo wake uliunganishwa tena. Badilisha utegemezi baadaye, na athari zilizoathiriwa pekee zitaendesha tena.

## Kwa nini Proxy (Vue 3) inashinda 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 zinakatiza *kitu kizima* (ufunguo wowote, nyongeza, kufuta, mabadiliko ya safu), kuondoa tatizo linalojulikana la Vue 2 — hakuna tena njia za `Vue.set`.

## ref dhidi ya reactive ndani

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

## Kwa nini ni muhimu

Kuelewa mfumo wa track/trigger Proxy inaeleza *kwa nini* Vue ni muhimu sana (inabadilisha athari tu zinazotegemea data iliyobadilika — athari ya kina) na *kwa nini* mipango ya Vue 2 iliyokataa imewepo na ni nchi ya miango ya Vue 3.

Inachumba pia sheria za vitendo: kwa nini `reactive` inahitaji vitu (Proxies haiwezi kuweka wanyonge, kwa hivyo `ref`), na kwa nini kuchanganya `reactive` kunakweleza kufuatilia (unakutenganisha thamani kutoka kwa kukatiza kwa `get/set` kwa Proxy).