Bagaimana sistem reaktivitas Vue 3 bekerja di balik layar?

Question

Accepted Answer

Reaktivitas Vue 3 dibangun di atas **Proxies** JavaScript. Ketika Anda membuat state reaktif, Vue membungkusnya dalam Proxy yang **mencegat pembacaan dan penulisan**, memungkinkan **melacak** efek mana yang bergantung pada properti mana, dan **memicu** efek-efek tersebut untuk berjalan kembali ketika data berubah.

## Mekanisme inti: lacak saat membaca, picu saat menulis

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

Membaca properti **melacak** efek yang sedang berjalan sebagai dependensi; menulisnya **memicu** semua efek yang membacanya. Inilah cara Vue mengetahui *tepat* komponen mana yang akan dirender atau computeds mana yang akan diperbarui ketika properti tertentu berubah.

## Efek mengikat semuanya

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

Ketika efek berjalan, Vue menandainya sebagai "aktif" sehingga pembacaan reaktif apa pun selama itu terhubung kembali kepadanya. Ubah dependensi nanti, dan hanya efek yang terpengaruh yang berjalan kembali.

## Mengapa Proxy (Vue 3) mengalahkan 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 mencegat *seluruh* objek (kunci apa pun, penambahan, penghapusan, mutasi array), menghilangkan batasan terkenal Vue 2 — tidak ada lagi workaround `Vue.set`.

## ref vs reactive secara 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)
```

## Mengapa ini penting

Memahami model track/trigger Proxy menjelaskan *mengapa* Vue sangat efisien (ia hanya memperbarui efek yang benar-benar bergantung pada data yang berubah — reaktivitas butir halus) dan *mengapa* batasan Vue 2 lama ada dan hilang di Vue 3.

Ini juga menjelaskan aturan praktis: mengapa `reactive` membutuhkan objek (Proxies tidak dapat membungkus primitif, oleh karena itu `ref`), dan mengapa mendekonstruksi `reactive` memutus pelacakan (Anda memisahkan nilai dari interception get/set Proxy).