Kaip veikia Vue 3 reaktyvumo sistema gauboje?

Question

Accepted Answer

Vue 3 reaktyvumas sukurtas JavaScript **Proxies** pagrindu. Kai padarai būseną reaktyvią, Vue ją apvija Proxy, kuris **perimti skaitymai ir rašymai**, leidžia jums **sekti** kurie efektai priklauso nuo kokių savybių, ir **suaktyvina** tuos efektus iš naujo vykdyti, kai duomenys pasikeičia.

## Pagrindinė mechanika: sekti skaityme, suaktyvinti rašyme

```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;
    },
  });
}
```

Savybės skaitymas **seka** šiuo metu veikiantį efektą kaip priklausomybę; rašymas **suaktyvina** visus efektus, kurie ją skaito. Tai yra kaip Vue žino *tiksliai* kurį komponentą pervaizduoti arba kuriuos apskaičiuotus atnaujinti, kai tam tikra savybė pasikeičia.

## Efektai tai sausto

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

Kai efektas veikia, Vue jį žymi kaip "aktyvų", todėl bet kokie reaktyvūs skaitomi metu jo veikimo grįžta prie jo. Vėliau pakeitus priklausomybę, tik paveikti efektai iš naujo veikia.

## Kodėl Proxy (Vue 3) geresnis nei 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 ✅
```

Proxy perimta *visą objektą* (bet kokią raktą, papildymus, trynimus, masyvo mutacijas), pašalinant Vue 2 žinomus apribojimus — daugiau nereikia `Vue.set` apibėgimai.

## ref vs reactive viduje

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

## Kodėl tai svarbu

Supratimas sek/suaktyvink Proxy modelio paaiškina *kodėl* Vue yra toks efektyvus (atnaujina tik efektus, kurie iš tikrųjų priklauso nuo pakeistų duomenų — smulkesnė reaktyvumas) ir *kodėl* seni Vue 2 apribojimai egzistavo ir išnyko Vue 3.

Tai taip pat paaiškina praktinius taisykles: kodėl `reactive` reikalingi objektai (Proxy negali apvyti primityvų, todėl `ref`), ir kodėl `reactive` destruktūrizavimas laužo sekimą (atskiri vertę nuo Proxy get/set perimties).