Vue.js Yaşam Döngüsü (Lifecycle)
Hepinize merhaba dostlarım 😊. Yine karşınızda yeni ve tatlı bir konuyla daha karşınızdayım. Özellikle de son zamanlarda uzun uzun üzerinde çalıştığım konulardan sizlere bahsetmek, elimden geldiğince de yabancı dökümanlardan repo oluşturma derdindeyim 😅. Her neyse yine çenem düştü dostlarım kusuruma bakmayın 😊.
Konumuza gelecek olursak bu makalede başlıktan da anlayacağınız üzere "Vue.js Yaşam Döngüsü" konusunu ele alacağız. Bir ses duyar gibi oldum ve tam da beklediğim soru geldi harbiden
Hocam bu yaşam döngüsü olayında temel amaç ne yani uygulamalarımızda kullanacağımız bir yapı falan mı yazcaz kütüphane class benzeri 😊?
Yok hayır dostlarım kodsal bir kısım yok. Ama örnekleme olarak anlatcam kendinize kasıntı yapmayın telaşa girmeyin relax olun 😊.
Konunun özüne gelecek olursak dostlarım bizim Vue.js ile uygulama geliştirme esnasında neler oluyor neler bitiyor hangi hooks lar çalışıyor bunlara bakacağız 😊. Şimdi ufaktan konumuza girişi yapalım izin verirseniz 😅
1-) beforeCreate()
Eveeeet dostlarım geldik artık konumuzun ilk kısmına 😊. İsminden de anlayacağınız üzere dostlarım bu hook (vue.js yaşam döngüsü diye aratırsanız bu kancalar çıkacaktır karşınıza) vue instance oluşturulmadan önce çalışıyor. Mesela uygulamanız ilk açıldığında bir olay tetiklemek vs istiyorsanız bunu kullanabilirsiniz dostlarım. Kod üzerinden size göstereyim hemen bunu
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Yaşam Döngüsü (Lifecycle) | MFSoftware Blog</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- SİZ BU DOSYAYI LOKALE INDIREBILIRSINIZ BEN BLOG HIZLI CIKSIN DIYE BURADAN CEKTIRDIM :) -->
<script>
const app = new Vue({
name : 'Vue.js Yaşam Döngüsü (Lifecycle)',
data : {
},
beforeCreate(){
console.log("Uygulama Oluşturuluyor. Vaziyet Alın");
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazalım. Bunu yazdığımızda karşımıza gelecek olan console çıktısı
Uygulama Oluşturuluyor. Vaziyet Alınşeklinde olacaktır dostlarım. Şimdi aklınızdaki soruya gelelim. Bazılarınız içinden bazılarınız da mırıldanarak şunu diyor ben seziyorum
Ya tamam güzel bir şey faydalı bilgiler öğretiyorsunuz Allah razı olsun hocam sizden ama bu hook u nerede kullanırız hangi kısımlarda ihtiyacımız olur buna ?
Cidden beklediğim soruydu bu dostlarım makaleye başlarken bile bunu sezdim samimi diyorum. Şimdi sorunuzun cevabına gelecek olursak dostlarım. Bir panel ve ön yüz tasarımı yaptınız bunu da api ye bağladınız. Gelen giden ziyaretçilerin log kaydını vs tutuyorsunuz varsayalım. İşte bu kısımda login olup dashboard açıldığı anda bu beforeCreate() hook unu çalıştırıp gelen kullancıı bilgisini vs veri tabanına kaydedebilirsiniz (İleride ölüp kalmazsak bunu da anlatcam size dostlarım merak etmeyin 😊). Bu gibi durumlarda yani uygulama oluşturulmaya başlandığı anda backend kısmında evet atabilirsiniz. Gelelim bir diğer kısma
2-) created()
Tam gaz hızla devam ederken bir diğer konumuza da gelmiş bulunmaktayız dostlarım. İsminden anlaşılıyor az çok bunun detayına veyta teorik kısmına çok girmeyeceğim beni biliyorsunuz 😉. Bu hook kısmına gelecek olursak dostlarım vue instance oluşturulduğunda çalışacaktır. Kod kısmından örnek vereceyim yine dostlarım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Yaşam Döngüsü (Lifecycle) | MFSoftware Blog</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- SİZ BU DOSYAYI LOKALE INDIREBILIRSINIZ BEN BLOG HIZLI CIKSIN DIYE BURADAN CEKTIRDIM :) -->
<script>
const app = new Vue({
name : 'Vue.js Yaşam Döngüsü (Lifecycle)',
data : {
},
beforeCreate(){
console.log("Uygulama Oluşturuluyor. Vaziyet Alın");
},
created(){
console.log("Uygulama Oluşturuldu");
}
});
</script>
</body>
</html>şeklinde kodu yazdım dostlarım. Uygulamayı çalıştırdığımızda console kısmına baktığımızda karşımıza gelecek olan sonuç
Uygulama Oluşturuluyor. Vaziyet Alın
Uygulama Oluşturulduşeklinde olacaktır. Buradan olayı detaylı incelediğimizde gördüğünüz gibi önce beforeCreated() hook u daha sonra da created() hook u çalıştı.
Şimdi bunun nerede kullanıldığından da bahsedecek olursam dostlarım en son kullandığım alandan bahsetmek istiyorum. Sayfa yüklendiğinde API den verilerin alınıp vue component içerisindeki değişkene yazdırılıp daha sonra da sayfaya getirilmesi durumlarda kullanabilirsiniz. En son bu kısımda kullandım ben yani uygulama oluşturulunca api ye istek atılmasını yazdım. Siz de projelerinizde gerektiği kısımlarda bunun ayarlanmasını gerçekleştirebilirsiniz. Gelelim bir diğer konuya 😊
3-) beforeMount()
Eveeeet geldik bir diğer kısma daha dostlarım. Öncelikle bu kısmı çeviri den bakınca monte etmek, binmek gibi anlamlar çıkıyor. Bunun size özetini ben anlatayım hemen
İlk 2 başlıkta hani vue instance oluşturulmadan önce veya oluşturulduğunda diye olay geçiyordu ya. Bunda ise instance lar alındıktan sonra sayfa görüntülenmeden önce gerçekleşen hook olarak geçiyor. Buna da kod üzerinden değinelim sizlerle beraber
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Yaşam Döngüsü (Lifecycle) | MFSoftware Blog</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- SİZ BU DOSYAYI LOKALE INDIREBILIRSINIZ BEN BLOG HIZLI CIKSIN DIYE BURADAN CEKTIRDIM :) -->
<script>
const app = new Vue({
el : "#app",
name : 'Vue.js Yaşam Döngüsü (Lifecycle)',
data : {
ali : 1
},
beforeCreate(){
console.log("Uygulama Oluşturuluyor. Vaziyet Alın");
},
created(){
console.log("Uygulama Oluşturuldu");
},
beforeMount(){
console.log("Uygulama Gösterilmeye Hazırlanıyor");
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Sayfamızı yenilediğimizde ve console ekranımıza baktığımızda karşımıza gelecek olan çıktı
Uygulama Oluşturuluyor. Vaziyet Alın ----> beforeCreate() den geldi
Uygulama Oluşturuldu -------> created() den geldi
Uygulama Gösterilmeye Hazırlanıyor -----------> beforeMount() dan geldişeklinde mesajlarımız bastırıldı. Şimdi bu kısım nerelerde kullanılır diye soracaksınız dostlarım. Açık konuşmak gerekirse ben projelerimde beforeCreate() fonksiyonunu kullanmadım. Ama sizlere fikir olması açısından söylemem gerekirse örnek veriyorum sayfa görüntülenmeden önce bu verileri created() hook üzerinden aldığımızda ufak çaplı analizlerin hazırlanması olur ya da nasıl deyim ufak ve esprili bir alert mesajı göstermek isteyebilirsiniz "Bu sayfayı yalnızca ölüler görür" gibisinden 😅. Bu gibi kısımlarda kullanabilirsiniz. Daha detaylı olarak google üzerinde stackoverflow üzerinde soru soran developer dostlarımızın kodlarından da bakıp projeleriniz üzerinde fikir sahibi olabilirsiniz 😊. Bu kısma kadar tamam isek dostlarım gelelim bir diğer kısma
4-) mounted()
Artık sayfamız görüntüleniyor ve bizim de yapacak işlerimiz bitmiyor çünkü yazılımcının işi biter mi ? Bitmez dostlarım 😉. Hayatı kolaylaştırmamız lazım bu bizim elimizde
Her neyse konuya gelecek olursak dostlarım bu hook bizim sayfamız görüntülendiğinde devreye girecektir. Hemen kod kısmından da bunu size göstereyim dostlarım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Yaşam Döngüsü (Lifecycle) | MFSoftware Blog</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- SİZ BU DOSYAYI LOKALE INDIREBILIRSINIZ BEN BLOG HIZLI CIKSIN DIYE BURADAN CEKTIRDIM :) -->
<script>
const app = new Vue({
el : "#app",
name : 'Vue.js Yaşam Döngüsü (Lifecycle)',
data : {
},
beforeCreate(){
console.log("Uygulama Oluşturuluyor. Vaziyet Alın");
},
created(){
console.log("Uygulama Oluşturuldu");
},
beforeMount(){
console.log("Uygulama Gösterilmeye Hazırlanıyor");
},
mounted(){
console.log("Uygulama Gösteriliyor");
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Sayfamız yüklendikten sonra console kısmından baktığımızda karşımıza çıkacak olan sonuç
Uygulama Oluşturuluyor. Vaziyet Alın
Uygulama Oluşturuldu
Uygulama Gösterilmeye Hazırlanıyor
Uygulama Gösteriliyor --------> mounted() hook undan geldişeklinde çıktılarımızı görüyoruz dostlarım.
Şimdiiiii bunun nerede kullanıldığından bahsetmem gerekirse dostlarım daha öncesinde yani vue ile uygulama geliştirmeye başladığımda mounted() içerisine yazıyordum bazı api kodlarını. Bu şekilde de kullanabilirsiniz sıkıntı olacağını pek sanmıyorum. Bunun haricinde de mesela bazı sayfalarda sol alt kısımda sayfa görüntülenmeye başladıktan ufak süre sonra chat kısmı çıkıyor veya alert falan çıkıyor karşınıza defalarca gelmiştir. Bu durumlarda da mounted() hook unu kullanabilirsiniz
5-) beforeUpdate() ve updated()
Eveeeet geldik bir diğer kısma dostlarım. Bu iki hook u tek bir başlıkta toplamamın sebebi güncellenmeden önce ve güncellendikten sonra uyarılarını anlık olarak sizle paylaşmak istediğimden dostlarım. Onun haricinde harhangi bir durum ya da özellik söz konusu değil 😊
Konuyu ufaktan anlatmam gerekirse dostlarım veri güncelleme yapacağımız sırada veri güncellenmeden önce beforeUpdate() hook u, daha sonrasında da updated() hook u çalışacaktır. Hemen sizlerle kod kısmından ufak bir örnek yapalım bunlarla ilgili
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Yaşam Döngüsü (Lifecycle) | MFSoftware Blog</title>
</head>
<body>
<div id="app">
Yaşadığım Şehir: {{ city}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- SİZ BU DOSYAYI LOKALE INDIREBILIRSINIZ BEN BLOG HIZLI CIKSIN DIYE BURADAN CEKTIRDIM :) -->
<script>
const app = new Vue({
el : "#app",
name : 'Vue.js Yaşam Döngüsü (Lifecycle)',
data : {
city : "Konya"
},
beforeCreate(){
console.log("Uygulama Oluşturuluyor. Vaziyet Alın");
},
created(){
console.log("Uygulama Oluşturuldu");
},
beforeMount(){
console.log("Uygulama Gösterilmeye Hazırlanıyor");
},
mounted(){
console.log("Uygulama Gösteriliyor");
this.city = "İstanbul"; // VERIYI UYGULAMA GORUNDUGUNDE GUNCELLEYELIM
},
beforeUpdate(){
console.log("Veri Güncelleniyor"); // VERI GUNCELLENMEDEN ONCE ÇALIŞACAK
},
updated(){
console.log("Veri Güncellendi"); // VERI GUNCELLENINCE ÇALIŞACAK
}
});
</script>
</body>
</html>
<!--
ekran çıktısı: Yaşadığım Şehir: İstanbul
-->şeklinde kodlarımızı yazdık dostlarım. Bu dosyayı tarayıcıda açtığımızda ve console kısmına bastığımızda karşımıza gelecek olan çıktı
Uygulama Oluşturuluyor. Vaziyet Alın
Uygulama Oluşturuldu
Uygulama Gösterilmeye Hazırlanıyor
Uygulama Gösteriliyor
Veri Güncelleniyor ----> beforeUpdate() hook u
Veri Güncellendi ------> updated() hook uşeklinde çıktılar görünüyor. İşlemler bu kadar basit 😊
Şimdiiiiii gelelim bunlar nerelerde kullanılıyor ve en güzel kısma değincem. Örnek veriyorum dostlarım sizin kategori ve urunler modülünüz var. Kategoriler modülünüz üzerinden olan değişiklik de haliyle ürünlere de yansıyacak. Siz de bu kısımda beforeUpdate() ve updated() kısmından bu değişikliği algılayıp gerekli apiye istek atma durumunu gerçekleştirebilirsiniz. Bu kısma kadar tamamız 😊. Gelelim bir sonraki konuya dostlarım
6-) beforeDestroy() ve destroyed()
Geldik son başlığımıza dostlarım. İsimlere baktığınızda silmek,yok etmek gibi anlam oldunu rahatlıkla anlayacaksınız. Bu hook lar uygulamamızda dom üzerinde silme işlemi gerçekleşmeden önce ve silme işlemi olduğunda çalışacak olan olaylardır. Hemen bunlarla ilgili de örnek yapalım sizlerle beraber
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Yaşam Döngüsü (Lifecycle) | MFSoftware Blog</title>
</head>
<body>
<div id="app">
Yaşadığım Şehir: {{ city}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- SİZ BU DOSYAYI LOKALE INDIREBILIRSINIZ BEN BLOG HIZLI CIKSIN DIYE BURADAN CEKTIRDIM :) -->
<script>
const app = new Vue({
el : "#app",
name : 'Vue.js Yaşam Döngüsü (Lifecycle)',
data : {
city : "Konya"
},
beforeCreate(){
console.log("Uygulama Oluşturuluyor. Vaziyet Alın");
},
created(){
console.log("Uygulama Oluşturuldu");
},
beforeMount(){
console.log("Uygulama Gösterilmeye Hazırlanıyor");
},
mounted(){
console.log("Uygulama Gösteriliyor");
this.city = "İstanbul"; // VERIYI UYGULAMA GORUNDUGUNDE GUNCELLEYELIM
},
beforeUpdate(){
console.log("Veri Güncelleniyor"); // VERI GUNCELLENMEDEN ONCE ÇALIŞACAK
},
updated(){
console.log("Veri Güncellendi"); // VERI GUNCELLENINCE ÇALIŞACAK
},
beforeDestroy(){
console.log("Uygulama Silinecek Haberin Olsun "); // SILINMEDEN ONCEKI UYARI
},
destroyed(){
console.log("Uygulama silindi aga ben bilmem silmeseydin"); // SILINDIKTEN SONRAKI UYARI
}
});
app.$destroy(); // UYGULAMAYI SILDIRELIM
</script>
</body>
</html>şeklinde kodlarımızı yazalım dostlarım. Tarayıcımızı yenilediğimizde karşımıza gelecek olan çıktı
Uygulama Oluşturuluyor. Vaziyet Alın
Uygulama Oluşturuldu
Uygulama Gösterilmeye Hazırlanıyor
Uygulama Gösteriliyor
Uygulama Silinecek Haberin Olsun -----> beforeDestroy() kısmından geliyor
Uygulama silindi aga ben bilmem silmeseydin ---> destroyed() kısmından geliyorşeklinde kodlarımızı yazdık dostlarım. Bu destroy ve destroyed kısmının nerelerde kullanılacağından bahsetmemiz gerekirse dostlarım daha önce hiç kullanmadım bunu. Ama fikir olması açısından ufak bir düşünecek olursak aynı şekilde kategoriler ve urunlerin olduğunu ele alalım. Herhangi kategoriyi sildiğimizde o kategoriye ait olan urunlerin genel kategorisine taşınma işlemi için api ye istek atma durumunu ayarlayabiliriz. Bütün işlemler bu kadar dostlarım 😊
Eveeeeet dostlarım. Bu makalemde sizlere "Vue.js Yaşam Döngüsü (Lifecycle)" konusundan elimden geldiğince dilim döndüğünce anlatmaya çalıştım. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık ve zor olabilir dostlarım anlıyorum. Özellikle öğrenme sürecinde bu ve bunun gibi olaylarla karşılaşmanız son derece doğaldır. Bu süreç içerisinde sizden yapmanızı istediğim tek şey her yazımda da dediğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız 😊". Bu dediklerimi hayat felsefesi yaptığınz sürece başarı sizler için kaçınılmaz olacaktır
Aynı zamanda 25 Aralık 2022 de kurmuş olduğum seyyaryazilimci.com soru cevap sitesi de yayında dostlarım haberiniz olsun. Her zaman dediğim gibi sorular ve cevaplar belirli bir süre admin onayından geçerek sistem üzerinde yayınlanmaktadır dostlarım bilginiz olsun.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer