 |
| Vue.js Lifecycle Hooks |
Türkçesi biraz değişik gelebilir ama aslında çok net ve anlaşılabilir bir çevirisi var. "
Lifecycle Hooks" yani "
Yaşamdöngüsü Kancaları" nedir bunu işleyeceğiz.
Bir örnek ile anlamaya çalışalım, elinizde bir çark var.
A,
B,
C,
D noktaları var ve çark döndükçe bu noktalara temas edecek. İşte bu noktaları programın içerisinde çalışan kod blokları olarak alın.
Mesela A
fonksiyonu, B fonksiyonu olacak şekilde kabul edelim. A
'ya geldiğinde A
içerisindeki kodlar işlenecek sonra da diğerleri. Buna Yaşamdöngüsü diyelim. Şimdi de kodlar çalışırken A
' veya B
'ye uğramadan veya her ikisi arasında bir işlem yapmak istiyorsak ne yaparız ?
Yaşamdöngüsünü bir anlık ta olsa durdurmamız gerekir. İşte burada Kancalar devreye giriyor. Yani A, B, C fonksiyonları çalışırken araya A > A 'dan önce bunu yap > B > C > D 'den önce bunu yap > E şeklinde bu döngüye müdahalede bulunuyoruz.
İşte her
Vue örneği aslında bu
Yaşamdöngüsü şeklinde çalışıyor ve bizlere bu döngü içerisinde çeşitli yerlere müdahale etme imkanı sunuyor.
Lifecycle Hooks Diyagramı
Öncelikle diyagrama bir göz atalım.
Yukarıdaki diyagram herşeyi açıklıyor aslında. Aşağıda bu diyagram içerisindeki fonksiyonları açıklamasıyla verdim. "before", önce ve "after", sonra demek.
// Uygulama oluşturulmadan önce
beforeCreate()
// Uygulama oluşturulduktan sonra
created()
// Uygulamaya bir etiket mount edilmeden hemen önce
beforeMount()
// Mount edildikten sonra
mounted()
// DOM verisi güncellenmeden hemen önce
beforeUpdate()
// DOM güncellendikten sonra
updated()
// beforeDestroy yani uygulama dağıtılmadan önce
beforeDestroy()
// Uygulama dağıtıldıktan sonra çalışır
destroyed()
Bunların ne olduklarını açıkladık listeledik şimdi detaylarına inelim ve aşama aşama görelim.
- beforeCreated() ile uygulama henüz oluşturulmadan önce yani data 'lar ve event 'lerden önce istediğinizi bu fonksiyon içerisinde çalıştırabilirsiniz.
- Bundan sonra da created() yani uygulama oluşturuldu ve bu fonksiyon içerisinde uygulama oluşturulduktan sonra yapılacak bir şey varsa kullanılır.
- ve aşağı doğru inerken program bir soru soruyor: "el" var mı? Görüyoruz uygulamada ilk olarak "el" degerini girip etikete bağlıyorduk. Peki ya bağlı değilse ? O zaman program diyor ki uygulama.$mount("#etiket") girildiği zaman devam et. (Hani mount etmenin ikinci yöntemiydi bu($mount("#etiket")))
- "el" işlemini sorguladıktan sonra bir soru soruyor "template" degeri ile bir şablon girilmiş mi. Eğer varsa render fonksiyonu ile derle, yoksa "el" ile bağlı olan etikete derle. (Biz başladığımızdan bu yana hep "el" kullandık)
- Mount edilmeden hemen bir tık öncesinde beforeMount() fonksiyonuna geçiyor.
- Ardından $mount işlemi yapılıyor. DOM verisi listeleniyor ve sonrasında mounted() fonksiyonuna geçiyor. Eğer listeleme tarzında işlemler kullanacaksanız sık kullanacağınız aşama.
- Şimdi mounted 'den sonra süreç ikiye ayrılıyor. Birisi diyagramda gördüğünüz üzere beforeUpdate() -> Update(), diğeri de beforeDestroy() -> destroyed()
- sayfada bir update işlemi yaparsanız, mesela ürün listelediniz ve "Sil" deyip listeyi db 'den tekrar çekip listelediniz. Sonuç olarak veri değişikliği oldu o zaman beforeUpdate() yani güncellemeden hemen önce ve sonrasında updated() fonksiyonu ile DOM verisi tekrar güncellendikten hemen sonra.
- Yukardakilerin hepsi anlaşılır fakat destroy görmediğiniz bir şey. Destroy bir Vue uygulaması üzerinden tüm direktiflerinin, eylemlerinin(events) ve alt çocuk örneklerinin dağıtılması yani kaldırılmasıdır. Örneğin açtığınız etiket içerisindeki tanımladığınız hiç bir eylemi bir daha kullanamazsınız. Ancak bu etiketin boşalması, silinmesi vs. durumu değil. Sadece o etiket üzerindeki işlemlerinizi kullanamazsınız. Listelediğiniz veriler son haliyle orada kalır.
Bir uygulama aşağıdaki şekilde dağıtılır.
uygulama.$destroy()
Bir örnek uygulama ile bu anlatımı da bitireceğim. Baştan aşağı lifecycle hooks ile tasarlanmış bir uygulama hazırladım. Aşağıya kodları ve jsfiddle önizlemesini paylaştım. Sayfa ilk açıldığında beforeCreate -> created çalışacak, "Başlat" dediğimizde
$mount edecek, "Değiştir" dediğimizde
veri değeri değişecek ve beforeUpdate -> updated çalışacak ardından "Uygulamayı dağıt" denildiğinde $destroy devreye girecek.
Ek olarak belirteyim ben alert() kullandığım için
veri değeri güncellenmeden önce uyarı çıkıyor gibi duruyor ancak alert() güncelleme işlemine paralel değil daha erken davranıyor. Bu yüzden veri güncellemesi sonra yapılıyor gibi duruyor.
Bu yazımda burada bitmiş bulunuyor. Bir sonraki yazımda görüşmek üzere...
2013 yılında geniş hayaller ile önce tasarım sonra da yazılım alanında çalışmalar yapmaya başladım. Sıfırdan başlayarak pek çok MVC tabanlı sistemler ve Web Sayfaları tasarladım.