Vue 3'ün reaktivite sistemi perde arkasında nasıl çalışır?

Question

Accepted Answer

Vue 3'ün reaktivitesi JavaScript **Proxies** üzerine inşa edilmiştir. Durumu reaktif yaptığınızda, Vue onu okuma ve yazma işlemlerini **engeller**, hangi efektlerin hangi özelliklere bağlı olduğunu **izler** ve veriler değiştiğinde bu efektleri **tetikler** ve yeniden çalıştırır.

## Temel mekanizma: okumada izle, yazmada tetikle

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

Bir özelliği okumak, şu anda çalışan efekti bir bağımlılık olarak **izler**; yazma işlemi onu okuyan tüm efektleri **tetikler**. Vue'nun belirli bir özellik değiştiğinde *tam olarak* hangi bileşenlerin veya computed değerlerinin güncellenmesi gerektiğini bilmesine bu şekilde neden olur.

## Efektler bunu bir araya getir

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

Bir efekt çalıştığında, Vue onu "etkin" olarak işaretler, böylece onun sırasında yapılan tüm reaktif okumalar geri ona bağlanır. Daha sonra bir bağımlılığı değiştirin ve yalnızca etkilenen efektler yeniden çalışır.

## Neden Proxy (Vue 3), Object.defineProperty (Vue 2) karşısında üstün?

```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 *tüm nesneyi* (herhangi bir anahtar, eklemeler, silmeler, dizi mutasyonları) engeller ve Vue 2'nin iyi bilinen sınırlamalarını ortadan kaldırır — artık `Vue.set` geçici çözümleri yoktur.

## ref ve reactive dahili olarak

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

## Neden önemli

track/trigger Proxy modelini anlamak, Vue'nun neden o kadar verimli olduğunu (yalnızca değişen verilere gerçekten bağlı olan efektleri günceller — ince daneli reaktivite) ve eski Vue 2 sınırlamalarının neden var olduğunu ve Vue 3'te neden ortadan kaybolduğunu açıklar.

Ayrıca pratik kuralları da açıklığa kavuşturur: `reactive` neden nesneler gerektirir (Proxies ilkel türleri sarabilmez, bu nedenle `ref`), ve `reactive` yıkmasının neden izlemeyi kırması (değeri Proxy'nin get/set müdahalesinden ayırırsınız).