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 বনাম 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 ইন্টারসেপশন থেকে আলাদা করেন)।