Vue.js 3 dökümantasyonuna bakarken Composotion API’lerde izlemek için iki hook görünce kafam karıştı. Dökümanlarına ilk baktığınızda aradaki farkını hemen kavrayamayabilirsiniz.

Biraz üstüne düştükten sonra temelde aynı ama çok farklı özellikleri olduğunu göreceksiniz. İlk önce arasındaki farkı ortaya koyalım.

Bunun farkını araştırdığınıza göre Vue.js hookları ve en azından watch() kullandığınızı varsayıyorum.

watch; reactive bir değeri kontrol eder ve değişim gösterdiğinde tetiklenir. En basit olarak kullanıcı için oluşturduğunuz modelin is_login prop değeri true olduğunda bir process yürütmek istiyorsanız, bunu watch ile takibe almanız gerekiyor.

watch() ve watchEffect() Arasındaki Fark Nedir?

watch() bir reactive değişkenin değeri kontrol ederken, watchEffect() bir callback işlemi içinde her reactive değeri kontrol eder. Diğer özelliği ise computed gibi çalışır, ancak bir değer döndürmek yerine tetikleme işlemleri için kullanılır. Aşağıdaki satırları çalıştırıp üzerinde düzenlemeler ile öğrendiklerinizi pekiştirebilirsiniz.

watch(refA, () => {
  console.log(refA.value);
  console.log(refB.value);
});

watchEffect(() => {
  console.log(refA.value);
  console.log(refB.value);
});

const aPlusB = computed(() => {
  console.log(refA.value);
  console.log(refB.value);
  return refA.value + refB.value;
});

Ne zaman watch() Kullanmalıyım?

İlk bakışta watchEffect(), watch() üstün gibi görünebilir. Callback işleminde tüm reactive değerleri takip etmek çok güzel olacaktır ama bu davranış problemlerinide yanında getirecektir.

Yalnızca bir veya daha fazla reactive değişkenlerin değerlerini kontrol etmek istiyorsanız, watchEffect() yerine watch() kullanmanız gerekir. Unutmayınız ki watch() önceki değerede ulaşmanızı sağlamaktadır.

Bence watch() ve watchEffect() arasındaki farkı hatırlamanın en kolay yolu watchEffect()’i bir değer döndürmeyen, ancak tetikleyici bir computed() varyantı gibi düşünmektir.