Bagaimana sistem reaktivitas Vue 3 bekerja di bawah sesudu?

Question

Accepted Answer

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

## Mekanisme inti: lacak saat dibaca, picu saat ditulis

```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 saat ini sebagai ketergantungan; menulisnya **memicu** semua efek yang membacanya. Ini adalah bagaimana Vue tahu *persis* komponen mana yang akan dirender atau computed mana yang akan diperbarui ketika properti tertentu berubah.

## Efek mengikat semuanya bersama

```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 setiap pembacaan reaktif selama itu terhubung kembali ke efek tersebut. Ubah ketergantungan nanti, dan hanya efek yang terkena akan dijalankan kembali.

## Mengapa Proxy (Vue 3) lebih baik daripada 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 mencegat *seluruh objek* (kunci apa pun, penambahan, penghapusan, mutasi array), menghilangkan peringatan terkenal Vue 2 — tidak ada lagi solusi `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 Proxy lacak/picu menjelaskan *mengapa* Vue sangat efisien (hanya memperbarui efek yang benar-benar bergantung pada data yang berubah — reaktivitas dengan butir halus) dan *mengapa* keterbatasan Vue 2 lama ada dan hilang di Vue 3.

Ia juga menjelaskan aturan praktis: mengapa `reactive` memerlukan objek (Proxy tidak dapat membungkus primitif, maka `ref`), dan mengapa mendestrukturisasi `reactive` memecahkan pelacakan (Anda melepaskan nilai dari intersepsi get/set Proxy).