Web geliştirme dünyasında, özellikle de Vue.js ve C# .NET gibi teknolojilerle çalışırken, bileşenler arasındaki veri akışı ve yaşam döngüsü hayati önem taşıyor. Hani bazen bir yerden bir yere veri göndermeye çalışırsın ya, tam istediğin gibi gitmez, kafanda soru işaretleri oluşur… İşte tam da bu noktada Vue.js’in lifecycle hooks’ları devreye giriyor. Özellikle `created` ve `mounted` hook’ları, komponentimiz DOM’a yerleşmeden veya yerleştikten sonra belirli işlemleri yapmamızı sağlıyor. Bu arada, bu konuda biraz araştırma yaparken, kendi yazdığım bir projede yaşadığım bir sorunu da hatırladım. Neyse, konuya dönelim.
Şimdi öncelikle bu lifecycle hook’ların ne olduğundan biraz bahsedelim. Vue.js’te bir bileşen oluşturulduğunda, güncellendiğinde veya yok edildiğinde tetiklenen özel metotlar bunlar. Bunlardan en sık kullandıklarımızdan ikisi `created` ve `mounted`. `created` hook’u, bileşen belleğe yüklendiğinde ama henüz DOM’a eklenmeden çalışır. Yani bu aşamada veri çekebilir, bazı değişkenleri başlatabiliriz ama DOM’la ilgili bir işlem yapmaya kalkarsak işler biraz karışabilir, çünkü DOM henüz hazır değil. Tamam, bu güzel bir başlangıç noktası.
Ardından gelen `mounted` hook’u ise, bileşenimizin DOM’a tamamen yerleştiği ve etkileşime girebileceğimiz zaman tetiklenir. İşte bu noktada DOM ile ilgili tüm işlemleri rahatlıkla yapabiliriz. Mesela bir kütüphaneyi DOM’a bağlamak, üçüncü parti bir script çalıştırmak veya bazı DOM manipülasyonları yapmak için ideal bir yer burası. Yani özetle, `created` veri hazırlığı için, `mounted` ise DOM ile ilgili işler için biçilmiş kaftan diyebiliriz. Ne güzel değil mi?
Peki, bu bilgileri C# .NET ile yazdığımız bir REST API’ye veri gönderme senaryosunda nasıl kullanacağız? Diyelim ki Vue.js tarafında bir formumuz var ve bu formdaki bilgileri bir C# backend’ine göndermek istiyoruz. Kullanıcı formu doldurduğunda, belki de bazı verileri backend’den alıp dropdown’ları doldurmak isteyebiliriz. İşte tam bu anda `created` hook’u bize yardımcı olabilir. API’den gerekli verileri çekip componentin data’sına atayabiliriz. Sonrasında kullanıcı formu gönderdiğinde ise `mounted` hook’unun bir parçası olarak veya ayrı bir metotla bu bilgileri backend’e gönderebiliriz.
Bir de işin güncelleme kısmı var tabii. `updated` hook’u ise bileşen güncellendiğinde tetiklenir. Diyelim ki bir veri güncellendi ve bu güncellemenin DOM’a yansımasını görmek istiyoruz. Bu hook’u kullanarak DOM’daki değişiklikleri takip edebiliriz. Ancak, `updated` hook’u her küçük değişiklikte tetiklenebileceği için dikkatli kullanmak gerekiyor, aksi takdirde performans sorunları yaşanabilir. Sanırım bu konuda biraz dikkatli olmak lazım.
Şimdi gelelim pratik kısma. Diyelim ki bir kullanıcı listesi var ve bu listeyi Vue.js’te göstermek istiyoruz. Önce backend’den bu listeyi almamız gerekiyor. İşte bu noktada `created` hook’u devreye giriyor. Bu hook içinde bir API çağrısı yaparak kullanıcıları çekip `users` adında bir diziye atayacağız. Sonrasında bu diziyi template’imizde döngüye sokup göstereceğiz. Bu arada, bu işlemi yaparken genellikle Axios gibi bir kütüphane kullanırız. Hem kolay hem de güçlü.
Şimdi size basit bir kod örneği göstereyim. Diyelim ki Vue.js tarafında bir `UserList.vue` bileşenimiz var ve bu bileşen `created` hook’unda `axios` kullanarak bir API’den veri çekecek. API’miz de basit bir C# .NET Core ile yazılmış olacak.
Vue.js Tarafı: Veri Çekme
Öncelikle Vue.js component’imizin `created` hook’unu kullanarak backend’den kullanıcı listesini çekelim. Bu arada, eğer axios kütüphanesini yüklemediyseniz, komut satırına npm install axios yazarak ekleyebilirsiniz. Zaten genellikle Vue projelerinde varsayılan olarak bulunur ama yine de kontrol etmekte fayda var.
Şöyle bir kod düşünebiliriz:
<template> <div> <h2>Kullanıcı Listesi</h2> <ul v-if="users.length"> <li v-for="user in users" :key="user.id"> {{ user.name }} - {{ user.email }} </li> </ul> <p v-else>Kullanıcılar yükleniyor...</p> </div> </template><script> import axios from 'axios'; // Axios kütüphanesini ekliyoruz
export default { data() { return { users: [] // Kullanıcıları tutacak boş bir dizi }; }, created() { // Bileşen oluşturulduğunda API'den veri çekiyoruz axios.get('https://localhost:7001/api/users') // Kendi backend API adresinizi girin .then(response => { this.users = response.data; // Gelen veriyi users dizisine atıyoruz }) .catch(error => { console.error('Kullanıcılar çekilirken hata oluştu:', error); // Burada kullanıcıya bir hata mesajı gösterebiliriz aslında }); } }; </script>
Bu kodda `created` hook’u içinde `axios.get` ile `https://localhost:7001/api/users` adresine bir istek gönderiyoruz. Gelen yanıtın `data` kısmındaki kullanıcı bilgilerini `this.users`’a atıyoruz. Bu sayede template’imizdeki `v-for` direkt olarak bu veriyi kullanabiliyor. Ne güzel değil mi? Aslında bu kadar basit.
Şimdi de bu isteği karşılayacak basit bir C# .NET Core backend API örneği görelim. Bu sadece bir başlangıç, gerçek bir uygulamada veritabanı işlemleri, hata yönetimi gibi detaylar da olacaktır tabii ki.
C# .NET Core API Tarafı: Veri Sağlama
Backend’de, `UsersController` adında bir controller oluşturup, `GetUsers` adında bir action metodu yazacağız. Bu metot basitçe birkaç kullanıcı nesnesi döndürecek. Gerçek projelerde bunu bir veritabanından (PostgreSQL, SQL Server vb.) çekeceksiniz.
using Microsoft.AspNetCore.Mvc; using System.Collections.Generic;[ApiController] [Route("api/[controller]")] public class UsersController : ControllerBase { [HttpGet] public ActionResult<IEnumerable<User>> GetUsers() { // Gerçek bir uygulamada bu veriler veritabanından gelir var users = new List<User> { new User { Id = 1, Name = "Ali Veli", Email = "aliveli@example.com" }, new User { Id = 2, Name = "Ayşe Fatma", Email = "aysefatma@example.com" }, new User { Id = 3, Name = "Mehmet Topal", Email = "mehmet@example.com" } }; return Ok(users); // Listeyi JSON olarak döndürüyoruz } }
// Basit User modeli public class User { public int Id { get; set; } public string Name { get; set; } public string Email { get; set; } }
İşte bu kadar basit. Vue.js’teki `created` hook’u bu adrese istek gönderdiğinde, bu C# metodu çalışacak ve `users` listesini JSON formatında geri döndürecek. Vue tarafında da bu gelen JSON verisi işlenecek. Gerçekten de `created` hook’u, komponentın ilk hazırlanma aşamasında veri çekmek için harika bir seçenek. Hatta bazen `mounted` hook’u içinde de veri çekebilirsiniz ama eğer DOM manipülasyonu yapmayacaksanız, `created` daha mantıklı çünkü DOM hazır olmadan işlemler tamamlanmış oluyor. Tam hatırlamıyorum ama sanırım bu şekilde kullanmak daha performanslı oluyor.
Peki, ya `mounted` hook’unu ne zaman kullanacağız? Diyelim ki bir grafik kütüphanesi kullanıyorsunuz ve bu kütüphanenin DOM’a yerleşmiş bir element üzerine çizim yapması gerekiyor. İşte bu durumda `mounted` hook’u sizin kurtarıcınız olur. Veya bir modal penceresini ilk açtığınızda, pencere DOM’a eklendikten sonra bazı focus ayarları yapmak istiyorsunuz. Bu gibi durumlar için `mounted` birebir.
Bu arada, daha önce bir projede şöyle bir hata yapmıştım. API’den gelen veriyi `created` hook’unda aldım ama bu veriyi DOM’a yerleştirmeden önce DOM’la ilgili bir işlem yapmaya çalıştım. Tabii ki çalışmadı, çünkü DOM henüz hazır değildi. Neyse ki o hatayı da hızlıca düzelttik ama insan bazen böyle basit hatalar yapabiliyor işte. Kendi programım sınıfta kaldı o gün 🙂
Sonuç olarak, Vue.js’teki `created` ve `mounted` lifecycle hook’ları, komponent yaşam döngüsünü anlamak ve doğru zamanda doğru işlemleri yapmak için çok önemli. `created` ile veri hazırlığına başlayıp, `mounted` ile DOM ile ilgili işleri halledebiliriz. Bu iki hook’u doğru kullanarak, hem daha temiz kod yazabilir hem de performanslı uygulamalar geliştirebiliriz. Gerisi sizin yaratıcılığınıza kalmış. Bu arada, eğer bu konuda daha fazla bilgi edinmek isterseniz, Vue.js’in resmi dokümantasyonuna göz atabilirsiniz. Orada her şey çok detaylı anlatılmış. Vue.js Lifecycle Hooks diye aratırsanız da bolca örnek bulursunuz sanırım.