Effect Nedir?

Vue.js'deki effect, Vue 3'ün reaktivite sisteminin en alt seviyedeki yapı taşıdır. Bir fonksiyonu hemen çalıştırır, çalışırken okuduğu reaktif değerleri (ref, reactive) bağımlılık olarak kaydeder ve bu değerlerden biri değiştiğinde fonksiyonu yeniden çalıştırır. computed, watch, watchEffect ve bileşenlerin yeniden render edilmesi de bu mekanizmanın üzerine kuruludur.

effect fonksiyonu bir bağımlılık listesi almaz; yalnızca bir fonksiyon alır. Hangi değerlere bağlı olduğunu, fonksiyon çalışırken hangi reaktif değerlere eriştiğine bakarak kendisi belirler (otomatik bağımlılık izleme). Vue 2'deki beforeUpdate ve updated kancalarının yerine geçen bir şey de değildir; o kancalar Vue 3'te de aynı adlarla bulunur.

Örnek kullanım:

import { ref, effect } from 'vue';

const count = ref(0);

//effect fonksiyonu hemen bir kez çalışır, count değiştiğinde yeniden çalışır
effect(() => {
  console.log('Count değeri güncellendi:', count.value);
});

//count değerini güncelledikçe, effect fonksiyonu otomatik olarak çalışacaktır
count.value++;

//Konsolda önce "Count değeri güncellendi: 0", sonra "Count değeri güncellendi: 1" görülür

Bu örnekte effect fonksiyonu çalışırken count.value değerini okuduğu için count'a bağımlı hale gelir. count her güncellendiğinde fonksiyon otomatik olarak yeniden çalışır ve yeni değeri konsola yazar.

Not: effect düşük seviyeli bir API'dir ve uygulama kodunda nadiren doğrudan kullanılır. Bileşenlerde aynı işi, bileşen kaldırıldığında otomatik olarak durdurulan watchEffect ile yapmanız önerilir.