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 બરાબર જાણે છે *કયો* ઘટક રેન્ડર કરવો અથવા કયા computeds અપડેટ કરવા જોઈએ જ્યારે ચોક્કસ ગુણધર્મ બદલાય.

## અસરો તે બધું એક સાથે બાંધે છે

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

Proxies *આખો* ઑબ્જેક્ટ અટકાવે છે (કોઈપણ કી, ઉમેરણો, કાઢી નાખવું, શ્રેણી વિવર્તન), 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)
```

ટ્રેક/ટ્રિગર Proxy મોડલ સમજવું વર્ણવે છે *શા માટે* Vue એટલું કાર્યક્ષમ છે (તે માત્ર અસરો અપડેટ કરે છે જે વાસ્તવમાં બદલેલ ડેટા પર આધાર રાખે છે — સુંદર-દાણાદાર પ્રતિક્રિયાશીલતા) અને *શા માટે* Vue 2 ની જૂની મર્યાદાઓ અસ્તિત્વમાં હતી અને Vue 3 માં ગયાબ છે.

તે પણ વ્યવહારુ નિયમો સ્પષ્ટ કરે છે: શા માટે `reactive` આવશ્યક છે વસ્તુઓ (Proxies આદિમ વસ્તુઓને લપેટી શકતા નથી, તેથી `ref`), અને શા માટે `reactive` નું વિભાજન ટ્રેકિંગ તોડે છે (તમે Proxy ના get/set અટકાવણમાંથી મૂલ્ય અલગ કરો છો).