Vue.js Lifecycle Metotları

Merhabalar, bu yazımda Vue.js‘ in yaşam döngüsündeki metotlara değineceğiz. Hemen başlayalım.

İlk olarak gözümüzde canlanması için bir şekil üzerinde özetleyelim.

Burada görmüş olduğunuz kırmızı dikdörtgenler bizim metotlarımız gelin şimdi bunları inceleyelim.


  • beforeCreate

Vue.js instance nesnesi oluşturulmadan önce çağrılan metottur. Bu aşamada data observation, events, computed vb. ayarlanma aşamasındadır. Hiç biriyle etkileşime giremeyiz.


  • created

Bu aşamada data observation, events, computed vb. veriler ayarlanmıştır ve etkileşime girebiliriz. Ama DOM ile etkileşime giremeyiz. Çünkü mounted olmamıştır. Yani “el” elementimiz olarak belirttiğimiz html kod bloğu sanal DOM’ a daha yerleştirilmemiştir. Aynı zamanda “$el” property’ de kullanıma daha henüz hazır değildir.


  • beforeMount

Bu aşamada “el” elementimiz olarak belirttiğimiz html kod bloğu sanal DOM’ a daha yerleştirilmemiştir. Aynı zamanda “$el” property’ de kullanıma daha henüz hazır değildir. Yerleştirme işlemi gerçekleşmeden önce bu metot çağrılır.


  • mounted

Bu aşamada “el” elementimiz sanal DOM’ a yerleştirilmiştir. Kısaca tüm componentler render edilmiş ve sanal DOM’ a yerleştirilmiştir. Vue.js özel “$el” değişkeni yeni oluşturulan “vm.$el”’ e devredilmiştir. 

Eğer sayfada ajax ile bir veriyi componentlere aktaracaksanız bu metodu kullanabilirsiniz. Bu metot jquery’ deki $(document).ready() ifadesine denk geliyor.

Bazen bu işlemde de gecikmeler yaşanabiliyor. Bu gecikmeden ötürü hatalar oluşabiliyor. Bunu aşağıdaki kod parçacığıyla garanti altına alıyoruz.


mounted: function () {
  this.$nextTick(function () {
    // Buraya yazılacak kodlar, tüm view renderlenip sanal DOM'a 
    //yerleştirildiğinde çalışıyor..
    
  })
}

  • beforeUpdate

Herhangi bir data değiştiğinde ve DOM’ da bunu güncellemeye ihtiyaç duyduğunda data ve DOM’ da veri değişmeden bu metot çağrılıyor.


  • updated

Veride değişiklik olduktan sonra ve DOM’ da da veri değiştiğinde bu metot çağrılacaktır. Eğer değişiklikten sonra araya girip bir işlem yaptırmak istiyorsak bu metodu kullanacağız.


  • beforeDestroy

Vue instance nesnesi yok edilmeden önce çağrılacak metottur.


  • destroyed

Vue instance nesnesi yok edildikten sonra çağrılacak metottur.


Evet her şey bu kadar. Artık hangi metodun ne zaman çalıştığını biliyorsunuz.

Bu yazımın sonuna geldik. Bir sonraki yazımda görüşmek üzere. Sağlıcakla kalın.

Kaynak

https://burhantanis.com/blog_kod_dunyam/2019/05/10/vue-jste-hayat-doenguesue-olaylari-lifecycle-hooks

Bir cevap yazın