Conas a fheidhmíonn córas imoibritheachta Vue 3 faoin bhonnet?

Question

Accepted Answer

Tá imoibritheachta Vue 3 bunaithe ar **Proxies** JavaScript. Nuair a dhéanann tú staid imoibríoch, foluain Vue ann i Proxy a **ghabhann gealadh agus scríobh**, ligean ar **racdúil** a dhéanann cén éifeachtaí ar bhraistint cé na hairíonna a bhraistint siad, agus **scaoileann** na héifeachtaí sin chun iad a athrith nuair a bhíonn an sonraí ag athrú.

## Cén fáth is tábhachtach

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

A **racdúil** a léamh ar an éifeacht a bhíonn ag rith faoi láthair mar dhíobháil; a scríobh **scaoileann** gach éifeacht a léann sé. Seo conas a bhíonn a fhios ag Vue go beacht *cén* chomhpháirt a thógáil nó cén computeds a bhisliocaí nuair a bhíonn gealadh ar leithid.

## Na héifeachtaí a bhíonn ar fad

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

Nuair a ritheann éifeacht, marcáionn Vue "gníomhach" é ionas go bhfuil gach léamh imoibríoch i rith sé fhilleadh ar ais chuige. Athruithe ar dhíobháil ina dhiaidh sin, agus níl ach na héifeachtaí cumasc ag athrith.

## Cén fáth Proxy (Vue 3) a bhaint 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 ✅
```

Gabhann Proxies an *iomlán a chéile* (aon eochair, breiseanna, scriosa, mutations a raon), a bhaint ar fhios sainiúil Vue 2 — níl níos mó conair `Vue.set` ag teastáil.

## ref vs reactive go fóill

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

A thuiscint an tógáil Proxy racdúil/scaoileann tugann míniú *cén fáth* go bhfuil Vue chomh éifeachtach (ní bhacann sé ach na héifeachtaí a bhraistint go fíor ar dhsonraí a athraítear — imoibritheachta feoil-ghéar) agus *cén fáth* go raibh na seansocruithe Vue 2 ann agus imithe i Vue 3.

Soiléiríonn sé a bhríonna rialacháin phraiticiúla: cén fáth a bhíonn `reactive` ag teastáil a chéile (ní féidir le Proxies primitives a fholuain, mar sin `ref`), agus cén fáth a bhrisceann deconstructing a `reactive` racdúil (a dhíscaoileann tú an luach ó thuaidh-scaoileann an Proxy).