Hani bazen olur ya, Vue.js ile bir şeyler yaparsın, her şey tıkırında giderken birden bir bakarsın ki backend’e veri göndermen gerekiyor. İşte tam bu noktada ya Computed Properties ya da Watchers devreye giriyor. Bazen hangisini kullanmalı, hangisi daha mantıklı olur diye kafa karıştırıcı olabiliyor, değil mi? Ben de kendi projelerimde bu ikilemde çok kaldım açıkçası. Hani bazen birini kullanırsın, sonra bakarsın ki aslında diğerini kullanmak daha doğruymuş. Neyse efendim, gelin bu Computed Properties ve Watchers olayına biraz daha yakından bakalım.
Öncelikle Computed Properties’den başlayalım. Adı üstünde, bunlar hesaplanan özellikler. Yani bir değerin hesaplanması gerekiyorsa ve bu hesaplama başka verilere bağlıysa, Computed Properties imdadımıza yetişiyor. Mesela bir ürün listesi var ve bu listedeki toplam fiyatı hesaplamak istiyorsun. Veya bir kullanıcı adı ve soyadını birleştirip tam adı oluşturmak gibi. Bunlar için Computed Properties biçilmiş kaftan.
Computed Properties’in en güzel yanı ise önbellekleme (caching) yapması. Yani bir hesaplama yaptın ve o değer değişmediyse, her seferinde tekrar tekrar hesaplamak yerine önbellekten alıyor. Bu da performansı ciddi anlamda artırıyor, özellikle karmaşık hesaplamalar yapıyorsan. Hani bazen bir butona tıklandığında bir sürü işlem yapman gerekiyor ya, işte orada Computed Properties kendini gösteriyor. Tabii, bu hesaplama herhangi bir veri değiştiğinde yeniden çalışıyor, bu da gayet mantıklı.
Gelelim Watchers’a. Watchers ise adından da anlaşılacağı gibi, bir veriyi izliyor. Eğer izlediği veri değişirse, belirli bir fonksiyon çalıştırıyor. Bu genellikle asenkron işlemler, API çağrıları veya başka bir veri değiştiğinde DOM’da yapmak istediğin karmaşık güncellemeler için kullanışlı. Mesela kullanıcı bir arama kutusuna bir şeyler yazdığında, bu yazılanı izleyip anında bir arama sorgusu göndermek istiyorsun diyelim. İşte o zaman Watchers harika bir seçenek oluyor.
Computed Properties’den farklı olarak Watchers, önbellekleme yapmıyor. Yani her veri değiştiğinde o fonksiyon çalışıyor. Bu da bazen gereksiz yere API çağrılarına veya işlemlere yol açabiliyor, eğer dikkatli kullanılmazsa. Bu yüzden, ne zaman bir verinin değiştiğini “izlemen” ve buna tepki vermen gerekiyorsa, Watchers’ı tercih ediyorsun. Eğer sadece bir veriyi hesaplamak ve önbellekten kullanmak istiyorsan, o zaman Computed Properties daha mantıklı bir seçim olur bana göre.
Şimdi gelelim bu işin pratik kısmına. Diyelim ki bir Vue.js uygulamasında, kullanıcının girdiği bir metni backend’e göndereceksin. Bu metni bir input alanına yazacak ve bir butona basıldığında bu veri API’ye gidecek. İlk akla gelen şey bu metni bir data özelliğinde tutmak ve butona tıklanınca bu datayı alıp API’ye göndermek. Bu gayet basit bir yöntem.
Ama ya şöyle bir senaryo olsaydı? Kullanıcı metni yazdıkça, o metin doğrultusunda anında bir şeyler olmasını istiyorsun. Mesela metin belirli bir uzunluğa ulaştığında bir uyarı göster veya metin belli bir formatta değilse hata ver. İşte burada Watchers devreye giriyor. Kullanıcının yazdığı metni izleyip, her değişimde kontrol yapabilirsin. Tabii, bunu Computed Properties ile de yapabilirsin ama her karakter değiştiğinde tekrar hesaplama yapmak biraz verimsiz olabilir. Watchers bu noktada daha esnek.
Şimdi bir de şöyle düşünelim. Elinde bir kullanıcı listesi var ve her kullanıcının bir adı, soyadı ve bir de yaşı var. Sen bu listeden sadece belirli bir yaşın üzerindeki kullanıcıları filtrelemek istiyorsun. İşte bu filtreleme işlemini Computed Properties ile yapmak çok mantıklı. Çünkü yaş sınırı değişmediği sürece, filtreleme sonucu sabit kalacak ve önbellekten alınacak. Sanırım bu örnek durumu daha iyi anlatıyor.
Yanlış yaptık → Doğru yaptık karşılaştırmasına gelince; şöyle bir örnek vereyim. Diyelim ki bir kullanıcının tam adını oluşturmak istiyorsun. İlk başta şöyle bir şey yapabilirsin, bu pek de ideal değil aslında:
// YANLIŞ YAKLAŞIM data: { firstName: 'Ali', lastName: 'Veli' }, methods: { getFullName() { return this.firstName + ' ' + this.lastName; } } // Kullanım: {{ getFullName() }}Bu yöntemde, her DOM güncellendiğinde veya bu metot çağrıldığında `getFullName` tekrar çalışır. Eğer bu metot çok sık çağrılırsa veya hesaplama karmaşıksa, performans düşebilir. Aslında bu bir fonksiyon, computed property değil. Şimdi gelelim doğru yaklaşıma:
// DOĞRU YAKLAŞIM (Computed Property) data: { firstName: 'Ali', lastName: 'Veli' }, computed: { fullName() { return this.firstName + ' ' + this.lastName; } } // Kullanım: {{ fullName }}Gördüğün gibi, `fullName` bir computed property. Eğer `firstName` veya `lastName` değişmediyse, `fullName` değeri önbellekten alınır. Bu daha performanslı ve Vue’nun reaktif sistemine daha uygun bir yöntem. Bu arada, bu tür hesaplamalar için computed properties gerçekten çok işe yarıyor.
Şimdi bir de Watchers ile ilgili bir senaryo düşünelim. Mesela bir arama kutusu var ve kullanıcı arama kutusuna bir şeyler yazdığında, otomatik olarak bir API’ye istek göndermek istiyorsun. Bu durumda Watchers’ı kullanmak daha doğru olur. Çünkü her karakter değiştiğinde bir işlem yapılması gerekiyor, önbellekleme burada pek mantıklı değil. Şöyle bir kod düşünebiliriz:
// Watcher Örneği data: { searchTerm: '' }, watch: { searchTerm(newValue, oldValue) { console.log('Arama terimi değişti:', oldValue, '->', newValue); // Burada API çağrısı yapabilirsin this.fetchResults(newValue); } }, methods: { fetchResults(query) { // API çağrısı için örnek kod console.log('API çağrılıyor: ', query); // fetch('/api/search?q=' + query)... } } // Kullanım: <input type="text" v-model="searchTerm">Bu kodda, `searchTerm` değiştiği anda `watch` fonksiyonu çalışıyor ve yeni değeri (`newValue`) alıp bir API çağrısı yapıyoruz. Hani bazen arama kutularında yazdığın anda sonuçlar gelmeye başlar ya, işte o mekanizma genellikle böyle çalışıyor. Bu arada, bu tür anlık tepkiler için Watchers biçilmiş kaftan.
Neticede, Computed Properties ve Watchers’ı doğru yerlerde kullanmak, hem kodunu daha okunabilir hale getirir hem de uygulamanın performansını artırır. Eğer bir değerin hesaplanması gerekiyorsa ve bu hesaplama diğer verilere bağlıysa, önbellekleme avantajından yararlanmak için Computed Properties kullan. Eğer bir verinin değiştiğini izlemen ve bu değişime tepki olarak bir işlem yapman gerekiyorsa (API çağrısı, DOM güncellemesi vb.), o zaman Watchers senin kurtarıcın olur. Sanırım bu ikisini ayırt etmek artık daha kolay olacak senin için de. Bu arada, bazen ikisini birlikte de kullanabilirsin, yani bir computed property’nin değerini izleyip ona göre bir şeyler yapabilirsin. Bu da farklı senaryolar için güzel bir esneklik sağlıyor. Ne güzel değil mi? İnternette bu konuda bolca kaynak var aslında, mesela Vue.js resmi dokümanlarına göz atabilirsin. Ya da YouTube’da da birçok anlatım bulabilirsin, şu aramayı deneyebilirsin.
Sonuç olarak, bu iki özellik de Vue.js’in reaktif sisteminin temel taşlarından. Hangisini ne zaman kullanacağını bilmek, seni daha iyi bir geliştirici yapacaktır. Kendi projelerimde de bu ikisini bolca kullanıyorum ve gerçekten işleri kolaylaştırıyor. Mesela geçen gün bir projemde, kullanıcı bir form doldururken, formun tamamlanma yüzdesini hesaplamam gerekiyordu. İşte tam o anda computed property imdadıma yetişti. Hani bazen en basit görünen şeyler en çok işe yarar ya, işte bu da onlardan biriydi sanırım. Kendi başıma denediğimde de gayet güzel çalıştığını gördüm.