Vue 3 کا reactivity نظام اندر سے کیسے کام کرتا ہے؟

Question

Accepted Answer

Vue 3 کی reactivity JavaScript **Proxies** پر بنی ہے۔ جب آپ state کو reactive بناتے ہیں، Vue اسے ایک Proxy میں لپیٹ دیتا ہے جو **reads اور writes کو روکتا ہے**، یہ **track** کرنے دیتا ہے کہ کون سے effects کون سی properties پر منحصر ہیں، اور جب ڈیٹا تبدیل ہوتا ہے تو **triggers** کرتا ہے۔

## بنیادی mechanism: read پر track، write پر trigger

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

کسی property کو read کرنے سے موجودہ چل رہا ہوا effect track ہوتا ہے جیسے dependency؛ اسے write کرنے سے تمام effects trigger ہوتے ہیں جو اسے پڑھتے ہیں۔ یہ ہے کہ Vue کو بالکل معلوم ہوتا ہے کہ کون سا component render کرے یا کون سے computeds update کریں جب کوئی مخصوص property تبدیل ہو۔

## Effects یہ سب جوڑتے ہیں

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

جب کوئی effect چلتا ہے، Vue اسے "active" کے طور پر نشان زد کرتا ہے تاکہ اس دوران کوئی بھی reactive reads اسے واپس سے منسلک ہو جائیں۔ بعد میں کوئی dependency تبدیل کریں، اور صرف متاثر effects دوبارہ چلتے ہیں۔

## Proxy (Vue 3) بمقابلہ 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 پورے object کو intercept کرتے ہیں (کوئی بھی key، اضافے، حذف، array mutations)، Vue 2 کی معروف تنبیہات کو ختم کرتے ہوئے — مزید `Vue.set` حل کی ضرورت نہیں۔

## ref بمقابلہ reactive اندر سے

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

## اہمیت کیوں ہے

track/trigger Proxy model کو سمجھنا یہ بتاتا ہے کہ Vue اتنا efficient کیوں ہے (یہ صرف ان effects کو update کرتا ہے جو درحقیقت تبدیل شدہ ڈیٹا پر منحصر ہیں — fine-grained reactivity) اور پرانی Vue 2 حدود کیوں موجود تھیں اور Vue 3 میں غائب ہیں۔

یہ عملی قوانین کو بھی واضح کرتا ہے: کیوں `reactive` کو objects کی ضرورت ہے (Proxies primitives کو wrap نہیں کر سکتے، اس لیے `ref`)، اور کیوں `reactive` کو destructure کرنا tracking کو توڑ دیتا ہے (آپ value کو Proxy کے get/set interception سے الگ کر دیتے ہیں)۔