Vue 3 ਦੀ reactivity ਪ੍ਰਣਾਲੀ ਆਂਦਰਾ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ?

Question

Accepted Answer

Vue 3 ਦੀ reactivity JavaScript **Proxies** ਤੇ ਬਣੀ ਹੋਈ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ state ਨੂੰ reactive ਬਣਾਉਂਦੇ ਹੋ, Vue ਇਸਨੂੰ ਇੱਕ Proxy ਵਿੱਚ ਲਪੇਟਦਾ ਹੈ ਜੋ **reads ਅਤੇ writes ਨੂੰ intercept ਕਰਦਾ ਹੈ**, ਇਹ **track** ਕਰਨ ਦਿੰਦਾ ਹੈ ਕਿ ਕਿਹੜੇ effects ਕਿਹੜੀਆਂ properties ਤੇ ਨਿਰਭਰ ਹਨ, ਅਤੇ ਜਦੋਂ ਡਾਟਾ ਬਦਲਦਾ ਹੈ ਤਾਂ ਉਹ effects **trigger** ਕਰਦਾ ਹੈ।

## ਮੂਲ ਮੈਕਨਿਜ਼ਮ: read ਤੇ track, write ਤੇ trigger

```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 ਪੜ੍ਹਨਾ **tracks** ਕਰਦਾ ਹੈ ਵਰਤਮਾਨ-ਚਲ ਰਹੇ effect ਨੂੰ dependency ਦੇ ਤੌਰ ਤੇ; ਇਸ ਨੂੰ write ਕਰਨਾ **triggers** ਕਰਦਾ ਹੈ ਸਾਰੇ effects ਨੂੰ ਜੋ ਇਸ ਨੂੰ read ਕਰਦੇ ਹਨ। ਇਹ ਹੈ ਕਿ Vue *ਬਿਲਕੁਲ* ਜਾਣਦਾ ਹੈ ਕਿਹੜਾ component ਰੈਂਡਰ ਕਰਨਾ ਹੈ ਜਾਂ ਕਿਹੜੇ 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 reads ਇਸ ਨੂੰ ਵਾਪਸ ਲਿੰਕ ਹੋ ਜਾਣ। ਬਾਅਦ ਵਿੱਚ ਇੱਕ dependency ਬਦਲੋ, ਅਤੇ ਸਿਰਫ ਪ੍ਰਭਾਵਿਤ 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 ਦੀ ਚੰਗੀ ਤਰ੍ਹਾ ਜਾਣੀਆਂ ਜਾਣਦੀਆਂ caveats ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹਨ — ਹੁਣ `Vue.set` workarounds ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ।

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

## ਇਹ ਮਾਇਨੇ ਕਿਉਂ ਰੱਖਦਾ ਹੈ

Track/trigger Proxy ਮਾਡਲ ਨੂੰ ਸਮਝਣਾ ਸਮਝਾਉਂਦਾ ਹੈ *ਕਿਉਂ* Vue ਇੰਨਾ ਕੁਸ਼ਲ ਹੈ (ਇਹ ਸਿਰਫ ਉਹ effects ਨੂੰ update ਕਰਦਾ ਹੈ ਜੋ ਅਸਲ ਵਿੱਚ ਬਦਲੇ ਗਏ ਡਾਟਾ ਤੇ ਨਿਰਭਰ ਹਨ — fine-grained reactivity) ਅਤੇ *ਕਿਉਂ* ਪੁਰਾਣੀ Vue 2 ਸੀਮਾਵਾਂ ਮੌਜੂਦ ਸਨ ਅਤੇ Vue 3 ਵਿੱਚ ਚਲੀ ਗਈਆਂ ਹਨ।

ਇਹ ਵਿਵਹਾਰਿਕ ਨਿਯਮ ਵੀ ਸਮਝਾਉਂਦਾ ਹੈ: ਕਿਉਂ `reactive` ਨੂੰ objects ਦੀ ਜ਼ਰੂਰਤ ਹੈ (Proxies primitives ਨੂੰ wrap ਨਹੀਂ ਕਰ ਸਕਦੇ, ਇਸੇ ਕਰਕੇ `ref`), ਅਤੇ ਕਿਉਂ `reactive` ਨੂੰ destructuring ਕਰਨਾ tracking ਨੂੰ ਤੋੜਦਾ ਹੈ (ਤੁਸੀਂ value ਨੂੰ Proxy ਦੇ get/set interception ਤੋਂ ਵੱਖ ਕਰ ਦਿੰਦੇ ਹੋ)।