Vue 3 की reactivity प्रणाली हुड के नीचे कैसे काम करती है?

Question

Accepted Answer

Vue 3 की reactivity JavaScript **Proxies** पर निर्मित है। जब आप state को reactive बनाते हैं, Vue इसे एक Proxy में लपेटता है जो **reads और writes को intercept** करता है, **ट्रैक** करने की अनुमति देता है कि कौन से effects किस property पर निर्भर हैं, और **triggers** करता है वे effects जब data बदलते हैं तो फिर से चलने के लिए।

## यह महत्वपूर्ण क्यों है

```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 करना **tracks** करता है वर्तमान में चल रहे effect को एक dependency के रूप में; इसे write करना **triggers** करता है सभी effects जो इसे read करते हैं। यह है कि 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 read इससे जुड़ जाए। बाद में एक dependency बदलें, और केवल affected 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, additions, deletions, array mutations), Vue 2 की well-known limitations को हटाते हुए — अब `Vue.set` workarounds की कोई आवश्यकता नहीं है।

## ref vs 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 करता है जो वास्तव में बदले हुए data पर निर्भर हैं — fine-grained reactivity) और *क्यों* पुरानी Vue 2 limitations थीं और Vue 3 में चली गईं।

यह व्यावहारिक नियमों को भी स्पष्ट करता है: क्यों `reactive` को objects की जरूरत है (Proxies primitives को wrap नहीं कर सकते हैं, इसलिए `ref`), और क्यों एक `reactive` को destructure करने से tracking टूट जाती है (आप value को Proxy के get/set interception से अलग कर देते हैं)।