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

Proxies *పూర్తి వస్తువు* (ఏదైనా కీ, జోడింపులు, తొలగింపులు, శ్రేణి మ్యుటేషన్‌లు)ను అంతరాయం చేస్తుంది, 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)
```

## ఇది ఎందుకు ముఖ్యమైనది

track/trigger Proxy మోడల్‌ను అర్థం చేసుకోవడం *ఎందుకు* Vue చాలా సమర్థవంతమైనది (ఇది నిజానికి మార్పైన డేటాపై ఆధారపడిన ప్రభావాలను మాత్రమే అప్‌డేట్ చేస్తుంది — చక్కటి-దంతురకమైన రియాక్టివిటీ) మరియు *ఎందుకు* పాత Vue 2 పరిమితులు ఉన్నాయి మరియు Vue 3 లో వెళ్లిపోయాయి అని వివరిస్తుంది.

ఇది ఆచరణాత్మక నియమాలను కూడా స్పష్టం చేస్తుంది: `reactive` ఎందుకు వస్తువులను అవసరం చేస్తుంది (Proxies ఆదిమ విషయాలను చుట్టుకోలేవు, అందువల్ల `ref`), మరియు ఎందుకు `reactive` ను విస్ఫోటనం చేయడం ట్రాకింగ్‌ను విచ్ఛిన్నం చేస్తుంది (మీరు Proxy యొక్క get/set అంతరాయం నుండి విలువను వేరుచేస్తారు).