Vue 3 ची प्रतिक्रियाशील प्रणाली अंतर्गत कसे काम करते?

Question

Accepted Answer

Vue 3 ची प्रतिक्रियाशीलता JavaScript **Proxies** वर आधारित आहे. जेव्हा आप स्थितीला प्रतिक्रियाशील बनवता, Vue त्यास Proxy मध्ये गोळा करते जो **वाचन आणि लेखन अवरोधित करते**, **ट्रॅक** करते की कोणत्या प्रभाव कोणत्या गुणधर्मावर अवलंबून आहेत, आणि **ट्रिगर** करते जेव्हा डेटा बदलतो तेव्हा त्या प्रभावांना पुन्हा चालविते.

## मूल यंत्रणा: वाचनात ट्रॅक करा, लेखनात ट्रिगर करा

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

गुणधर्म वाचणे सध्याचा प्रभाव **ट्रॅक** करते अवलंबित्व म्हणून; लेखन **ट्रिगर** करते सर्व प्रभाव जे त्यास वाचतात. यामुळे Vue *अचूक* जाणते कोणता घटक रेंडर करायचा किंवा कोणता संगणित अद्यतन करायचा जेव्हा विशिष्ट गुणधर्म बदलतो.

## प्रभाव हे सर्व एकत्र करतात

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

जेव्हा प्रभाव चालतो, Vue त्यास "सक्रिय" चिन्हांकित करते जेणेकरून त्याचे अंतर्गत कोणतेही प्रतिक्रियाशील वाचन त्यास परत जोडलेले असतात. नंतर अवलंबित्व बदलतो, आणि फक्त प्रभावित प्रभाव पुन्हा चालतात.

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

Proxy *संपूर्ण वस्तू* अवरोधित करते (कोणतीही की, जोड, हटवणे, अरे रूपांतरण), Vue 2 च्या सुप्रसिद्ध मर्यादा दूर करते — आणखी `Vue.set` हेरफेर आवश्यक नाहीत.

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

## हे महत्वाचे का आहे

ट्रॅक/ट्रिगर Proxy मॉडेल समजणे स्पष्ट करते *का* Vue इतका कार्यक्षम आहे (फक्त प्रभाव अद्यतन करते जे वास्तविकपणे बदललेल्या डेटावर अवलंबून आहेत — सूक्ष्म-दानेदार प्रतिक्रियाशीलता) आणि *का* Vue 2 च्या जुन्या मर्यादा अस्तित्वात होत्या आणि Vue 3 मध्ये गायब झाल्या.

हे व्यावहारिक नियमही स्पष्ट करते: का `reactive` ला वस्तू आवश्यक आहेत (Proxy आदिम व्यापू शकत नाहीत, म्हणून `ref`), आणि का `reactive` विघटन ट्रॅकिंग तोडते (तुम्ही Proxy च्या get/set अवरोधन पासून मूल्य वियोग करता).