როგორ მუშაობს 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 იცის *ზუსტად*, რომელი კომპონენტი უნდა გაწეს ან რომელი computed უნდა განახლდეს, როდესაც კონკრეტული თვისება ირვება.

## ეფექტები ყველაფერს აერთიანებენ

```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 ასე ეფექტური (განახლებულია მხოლოდ ეფექტები, რომლებიც რეალურად დამოკიდებულია შეცვლილ მონაცემებზე — fine-grained reactivity) და *რატომ* არსებობდნენ Vue 2-ის ძველი შეზღუდვები და აღმოფხვრილია Vue 3-ში.

ასევე გაშუქებულია პრაქტიკული წესები: რატომ სჭირდება `reactive`-ს ობიექტი (Proxies ვერ შემოახვევს პრიმიტივებს, აქედან `ref`), და რატომ ხსნის `reactive`-ის დესტრუქტურირება ტრექინგს (ცდილობთ მნიშვნელობის გამოკვეთას Proxy-ის get/set ჩაჭერებიდან).