Vue.js'de 'watch' ve 'computed' nedir ve nasıl çalışırlar?

watch (izleyiciler)

• Belirli bir reaktif özelliğin değişimine tepki vermek için kullanılır.
• Asenkron işlemler gerçekleştirmeye, yürütmeyi geciktirmeye veya değer değiştiğinde karmaşık hesaplamalar yapmaya olanak tanır.
• Bileşen içinde watch seçeneğiyle yapılandırılır.
• handler (işleyici fonksiyon), deep (iç içe nesne/dizi derin gözlem) ve immediate (bileşen oluşturulduğunda işleyiciyi çalıştır) parametreleri olabilir.

Örnek:

watch: {
  // `firstName` özelliğindeki değişiklikleri izler
  firstName(newValue, oldValue) {
    console.log(`İsim ${oldValue} den ${newValue} e değişti`);
  },
  // `userInfo` nesnesini derinlemesine izler
  userInfo: {
    handler(newValue, oldValue) {
      console.log('Kullanıcı bilgisi değişti.');
    },
    deep: true
  }
}

computed (hesaplanan özellikler)

• Bağımlı reaktif verileri deklaratif olarak oluşturmak için kullanılır.
• Sonuç, bağımlı reaktifler değişene kadar önbelleğe alınır.
• Tembel hesaplanır, yalnızca erişildiğinde.
• Bileşen içinde computed seçeneğiyle yapılandırılır.
• Bir değer döndürmelidir.

Örnek:

computed: {
  // `firstName` ve `lastName` temelinde tam adı hesaplar
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  // Kullanıcı listesini filtreler
  filteredUsers() {
    return this.users.filter(user => user.isActive);
  }
}

Temel farklar

Özellik	watch	computed
Amacı	Bir özelliğin değişimine tepki vermek	Bağımlı verileri hesaplamak
Önbellek	Hayır	Evet (bağımlılıklara göre)
Tembel	Hayır	Evet
Dönüş değeri	Hayır (yan etki yapar)	Evet (hesaplanan değeri döner)
Asenkron	Evet	Hayır
Sözdizimi	İşleyici fonksiyonlar içeren nesne	Değer döndüren fonksiyonlar içeren nesne

computed kullanarak diğer verilere bağlı reaktif veriler elde edin. watch kullanarak, reaktif özellik değeri değiştiğinde yan etkileri (örneğin API çağrıları, DOM değişiklikleri) gerçekleştirin veya daha karmaşık mantıksal tepkiler yapın.