Vue 3 को reactivity system पछाडिको तहमा कसरी काम गर्छ?

Question

Accepted Answer

Vue 3 को reactivity JavaScript **Proxies** मामा बनिएको छ। जब तपाईंले state लाई reactive बनाउनुहुन्छ, Vue यसलाई Proxy मा wrap गर्छ जसले **पढ र लेखमा बाधा राख्छ**, कुन effects कुन properties मा निर्भर छन् भनेर **ट्र्यान्स गर्न** दिन्छ, र डेटा परिवर्तन हुँदा ती effects पुन: चलाउन **ट्रिगर** गर्छ।

## मुख्य तन्त्र: पढमा ट्र्यान्स, लेखमा ट्रिगर

```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 पढ्नु भनेको **ट्र्यान्स** हरु current-running effect लाई निर्भरताको रूपमा राख्छ; यसलेख्न भनेको सबै effects जस लेख्छ ती लाई **ट्रिगर** गर्छ। यो कसरी Vue जान्छ कुन कम्पोनेन्ट रेन्डर वा computeds अपडेट गर्न जब निर्दिष्ट 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 पढ यसमा जोडिन्छ। पछि निर्भरता परिवर्तन गरे, केवल प्रभावित 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 (कुनै पनी कुञ्जी, साथ, deletion, array mutations) लाई बाधा राख्छ, Vue 2 को ज्ञात caveat हरु हटाउँछ — अब `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 मडेल बुझ्नु भनेको Vue कति efficient छ भनेर व्याख्या गर्छ (यो केवल effects अपडेट गर्छ जो वास्तवमा परिवर्तित डेटामा निर्भर छ — fine-grained reactivity) र किन Vue 2 सीमित थिए र Vue 3 मा गएको छ।

यो पनि स्पष्ट गर्छ व्यावहारिक नियमहरु: किन `reactive` लाई objects चाहिन्छ (Proxies primitives लाई wrap गर्न सक्दैन, त्यसैले `ref`), र किन destructuring `reactive` लाई tracking तोड्छ (तपाई Proxy को get/set interception बाट मूल्य अलग गर्नुहुन्छ)।