VueJS’te neden watcher kullanmamalıyız?
Watcher kullanmanın yarattığı karmaşaları ve bu senaryolarda watcher kullanmadan nasıl geliştirme yapacağımızı gelin birlikte inceleyelim.
Performans Sorunları
Watcher’lar, VueJS’te bir veriyi izlemek ve o verinin uğradığı değişiklikleri takip etmek için kullanılır. İlgili veri her değiştiğinde watcher tetiklenir, bu kontrolsüz bir şekilde işlem yığılmalarına neden olabilir. Özellikle büyük ve karmaşık projelerde, gereksiz watcher’lar eklemek uygulamanın genel performansını olumsuz etkileyebilir. Bu nedenle, sadece gerçekten ihtiyaç duyulan durumlarda watcher kullanmak önemlidir. Ben kişisel olarak asla watch kullanılmamasını öneriyorum.
Karmaşıklığı Artırır
Watcher’lar, kodun karmaşıklığını artırır ve bakımı zorlaştırır. Geliştirilmesinin üzerinden yıllar geçmiş bir projede bakım yapılması gerektiğinde genellikle <template> kısmındaki method isimlerine CTRL tuşuna basılı tutularak tıklandığında event’lara erişilebilmelidir. Çok fazla satırdan oluşan bir dosyada tüm tetiklenmelerin <template> ksımında bulunması beklenir. Ama watcher kullanılmışsa bakımı gerçekleştirecek developer <script> kısmındaki tüm kodları gözden geçirmek zorunda kalır.
Alternatif Çözümler
VueJS’te veri değişiklikleri takip etmenin tek yolu watch kullanmak değildir. VueJS gibi template tabanlı framework’lerde event listener’ları <template> kısmında oluşturmak daha kolay okunan kodlar ortaya koyar.
Örneğin bir veriyi bir input’a two way binding ile bağladınız ve input her değiştiğinde veri de değişiyor. Bu değişimi yakalamak için input elementinin @input propertisini kullanabilirsiniz.
Söz konusu veri select elementine bağlı olarak değişiyorsa, @change propertisini kullanabilirsiniz.
Kullanıcı bir input’un dışına çıktığı zamanı yakalamak istiyorsanız @blur propertisini kullanabilirsiniz.
Bu ve benzeri yöntemlerle watch’tan daha etkili bir okunaklı kodlar yazmak mümkün.
Sonuç olarak
VueJS projelerinde watcher kullanmak, neredeyse bir hatadır. Kendi tecrübelerime göre parent component ile child component arasında v-model ilişkisi kurmak gerektiğinde watch kullanmak mecburi hale geliyor. Bunun dışında mecburi olduğu senaryoyla karşılaşmadım.
Genel olarak kullanıldığında performans sorunlarına, kod karmaşıklığına ve bakım zorluklarına yol açan watch özelliğini yazmadan önce bir daha düşünmenizde fayda var. Bu nedenle, projenizin ihtiyaçlarına göre watcher kullanımını dikkatlice değerlendirmek ve alternatif çözümleri göz önünde bulundurmak önemlidir. VueJS’in sunduğu diğer özellikleri ve API’leri de kullanarak daha temiz, okunabilir ve sürdürülebilir bir kod yazabilirsiniz.
Kullandığınız framework’ün resmi dokümanında zaman geçirmek o framework’ten maksimum düzeyde istifade etmenizi sağlar. Doküman okumak için mutlaka zaman yaratın.
