Yaya Vue 3 tsarin Reactivity aiki a ƙarƙar da bene?

Question

Accepted Answer

Vue 3 reactivity an bina akan JavaScript **Proxies**. Lokacin da kake yin state reactive, Vue yana cire shi a cikin Proxy wanda ya **tsaye karatu da rubutu**, yana baiwa damar **track** wajen ake aiki yana dogara da abubuwan lamba, kuma ya **daure** wajen aiki domin suka sake gudu lokacin da bayani ya canza.

## Yaya da mahimman

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

Karatu mahimmanci **track** aiki mai jari azaman dogara; rubutu shi **daure** duk wajen aiki da ya karanta shi. Wannan hanya ne Vue ta san *abubuwan* na gida don shirya ko na yin sabuntawa lokacin da takamaiman mahimmanci ta canza.

## Aiki ne ya rikita shi gida

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

Lokacin da aiki ya gudu, Vue ya taba shi "kasua" saboda duk karatu mai lakabu a jiyansa ta sake maidowa gida. Canza dogara daga baya, kuma kawai wajen aiki da ta shafa abin da ta sabuntawa.

## Yaya Proxy (Vue 3) ya rikita 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 tsaye *gaida* (duk wata mailo, kari, sharewa, jerin shifta), cire Vue 2 sannu da aka sani - babu karamin hanyoyin Vue.set.

## ref vs reactive a cikin

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

Jira track/daure Proxy tsari bayanin *yaya* Vue ne inganci sosai (shi na sabuntawa kawai wajen aiki wajen da aka damje bayani a jiya fine-grained reactivity) kuma *yaya* Vue 2 ƙanai da aka kasance a can jiya kuma aka tafi a Vue 3.

Haka kuma sanin da mahimman ƙanayoyi: yaya reactive na buni abubuwan (Proxies ba za su iya linzami ga primitive ba, don haka ref), kuma yaya dawo wajen reactive tsokeya tracking (kake tuƙar daraja daga Proxy's get/set tsayewa).