Piye cara sistem reaktivitas Vue 3 nganggo ing ngisor kulit?

Question

Accepted Answer

Reaktivitas Vue 3 dibangun ing ables JavaScript **Proxies**. Nalika nggawekke state reaktif, Vue ngambeng ing Proxy sing **ninggal maca lan nulis**, ngidini sampeyan **track** efek endi sing gumantung ing properti endi, lan **trigger** efek kasebut supaya mlaku maneh nalika data owah.

## Mekanisme core: track nalika maca, trigger nalika nulis

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

Maca properti **track** efek sing saiki mlaku minangka dependensi; nulis **trigger** kabeh efek sing maca. Kuwi carane Vue ngerti *persis* komponen endi sing kudu dirender utawa computed endi sing kudu digatekake nalika properti tertentu owah.

## Efek ikat kabeh iki

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

Nalika efek mlaku, Vue tandani minangka "aktif" supaya saben maca reaktif nalika mlaku padha nyambung maneh. Owah dependensi mengko, lan cuma efek sing kena pengaruhe sing mlaku maneh.

## Yopo Proxy (Vue 3) luwih apik tinimbang 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 ninggal *kabeh object* (kunci apa wae, tambahan, hapusan, mutasi array), ngilangi well-known caveats Vue 2 — ora perlu workaround `Vue.set` maneh.

## ref vs reactive internal

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

## Yopo iki penting

Mangerteni model track/trigger Proxy jelaske *yopo* Vue iku efisien (ngudakke cuma efek sing bener gumantung ing data sing owah — fine-grained reactivity) lan *yopo* limitations Vue 2 lawas ana lan ilang ing Vue 3.

Iku uga njlentrehke aturan praktis: yopo `reactive` butuh objects (Proxy ora bisa ambeng primitives, mulane `ref`), lan yopo destructuring `reactive` break tracking (sampeyan putus nilai saka Proxy get/set interception).