Computed mı, Watch mı?

Vue’da reaktivite sisteminin iki temel oyuncusu vardır: computed ve watch. Her ikisi de veri değişimlerine tepki verir, ama aynı işi yapmazlar. Bu iki özelliği yanlış yerde kullanmak, gereksiz render’lar veya beklenmedik davranışlar doğurabilir.

Bu yazıda ikisinin farkını, doğru kullanım senaryolarını ve performans açısından nelere dikkat etmen gerektiğini anlatıyoruz.

Computed: Reaktif Hesaplama Alanı

computed, türetilmiş değerleri (derived state) oluşturmak için kullanılır. Yani bir veya birden fazla reaktif değişkene bağlı olarak otomatik hesaplanan sonuçlar üretir.

import { ref, computed } from 'vue'

const firstName = ref('Cansu')
const lastName = ref('Arı')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)

Burada fullName, hem firstName hem lastName değiştiğinde kendini günceller. Vue, computed fonksiyonunu izler ve sadece bağımlı değerlerden biri değiştiğinde yeniden hesaplar. Diğer durumlarda önbellekten (cache) okur.

Özet: Computed, “bu değeri DOM’da göstereceğim, ama hesaplama bana ait” dediğin durumlar içindir.

Watch: Yan Etki (Side Effect) Dinleyicisi

watch, bir veya daha fazla reaktif değişkeni gözlemler ve bu değerler değiştiğinde belirli bir işlemi tetikler. Yani amaç hesap yapmak değil, reaksiyon göstermektir.

import { ref, watch } from 'vue'

const age = ref(20)

watch(age, (newVal, oldVal) => {
  console.log(`Yaş değişti: ${oldVal} → ${newVal}`)
  if (newVal >= 35) alert('Artık genç sayılmazsın 😛')
})

Burada age değiştiğinde Vue otomatik olarak callback’i çalıştırır. Bu genellikle API çağrısı yapmak, localStorage güncellemek veya bir animasyonu başlatmak için kullanılır.

Uyarı: watch asla template’teki bir değeri göstermek için kullanılmaz. Çünkü watcher bir değer döndürmez, sadece bir reaksiyon tanımlar.

Temel Farklar

Özellik	Computed	Watch
Amaç	Türetilmiş değer hesaplama	Yan etki çalıştırma
Geri dönen değer	Var (return ile)	Yok (callback)
Önbellek	Evet	Hayır
Re-render tetikler mi?	Evet, dolaylı olarak	Hayır, manuel olarak işlem yapar
Tipik kullanım	`fullname`, `filteredList`	API çağrısı, loglama, senkronizasyon

İleri Seviye: watchEffect

Vue 3 ile gelen watchEffect, hem computed hem watch arasında bir hibrittir. İçinde kullanılan tüm reaktif değişkenleri otomatik olarak izler.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('Count değişti:', count.value)
})

Hiç bağımlılık belirtmeden reaktif izleme yapmak istiyorsan watchEffect mükemmel bir seçenektir. Ancak bu fonksiyonun her render sonrası tetiklenme ihtimali yüksek olduğu için, dikkatli kullanılmalıdır.

watchEffect, genellikle veri yükleme veya cleanup gerektiren “otomatik reaksiyonlar” için kullanılır.

watch vs watchEffect Karşılaştırması

Özellik	watch	watchEffect
Bağımlılık	Manuel belirtilir	Otomatik tespit edilir
İlk çalıştırma	Değişiklik olduğunda	Hemen çalışır
Performans	Daha kontrollü	Daha sık tetiklenebilir
Kullanım Alanı	API, yan etki	Basit bağımlılık takibi

Performans ve En İyi Pratikler

Computed kullanırken fonksiyonun içinde asla yan etki yapma (örneğin fetch çağrısı). Computed yalnızca “veri üretmek” içindir.
Watch kullanırken debounce/throttle gerekebilir; çünkü çok sık tetiklenebilir.
Watcher’ın içinde reactive objeyi derin izlemek istiyorsan deep: true ayarını kullan:

watch(() => user.value, handler, { deep: true })

Ama gereksizse derin izleme performansı baltalar.

Hangi Durumda Hangisi?

Senaryo	Kullanılması Gereken
Template’te gösterilecek türetilmiş değer	computed
Kullanıcı bir input’a veri girdiğinde hesaplama	computed
API çağrısı yapmak	watch veya watchEffect
localStorage senkronizasyonu	watch
Reaktif değişiklikle animasyon/scroll başlatma	watch
Basit console.log veya geçici reaksiyon	watchEffect

Gerçek Hayat Örneği

Bir filtreleme senaryosunu düşünelim:

const query = ref('')
const items = ref(['vue', 'react', 'svelte'])
const filtered = computed(() => items.value.filter(i => i.includes(query.value)))

Burada computed, DOM’da filtrelenmiş listeyi gösterir. Ama eğer bu değişikliğe göre bir API çağrısı yapmak istiyorsan:

watch(query, debounce(fetchResults, 500))

İşte burada watch devreye girer. Yani biri UI’nin neyi göstereceğini, diğeri UI dışında ne yapılacağını belirler.

Sonuç

Vue’da computed ve watch arasındaki fark, görünenden daha derindir. computed bir değeri hesaplar, watch bir olaya tepki verir. İkisini doğru kullandığında, hem gereksiz render’lardan kurtulursun hem de kodun çok daha okunabilir hale gelir.

Kısaca: computed veriyi dönüştürür, watch davranışı dönüştürür.

Computed mı, Watch mı? Ne Zaman Hangisini Kullanmalı