VueJS Life Cycle (Yaşam Döngüleri)
Oluşturduğumuz Vue.js instance nesnesi çalışırken belirli işlemlerden geçerek hayatına devam eder. İşte bu belirli işlemleri bazen, ihtiyacımıza göre kullanabiliriz.
Vue.js içerisinde bu işlemleri yakalayabileceğimiz bazı metodlar bulunmaktadır. Şimdi tek tek bunları inceleyelim.
1-)beforeCreate
Bu hook metodu, ilk Vue.js instance nesnesi oluşturulmadan önce çağrılan metoddur. Bu aşamada data observation (reactivity), events, computed properties gibi özellikler henüz mevcut değildir hiç birisine erişim sağlayamayız.
(Vue oluşturulmadan önce yapmak istediğimiz işlemler)
2-)created
Vuejs örneği oluşturulduktan sonra çağrılır. Bu aşamada, vue örneği data observation(reactivity), events , computed properties , watchers gibi özellikleri işlemeyi bitirmiş ve kullanıma hazır demektir.
(Vue örneği oluşturulduğunda yapmak istediğimiz işlemler)
3-)mounted
Bu aşamada tüm componentler render edilmiş, ilgili verilere DOM’a bağlanmış ve sanal DOM’a yerleştirilmiştir.
(Vue örneği oluşup bütün componentler, ilgili verilen doma aktarılıp render edildikten sonra yapmak istediğimiz işlemler)
4-)beforeUpdate
DOM değiştirilmeden önce veriler değiştiğinde çağrılır. Bu, bir güncellemeden önce mevcut DOM’a erişmek için iyi bir yerdir diyor vueJS.
(Dom güncellenmeden önce yapacağımız işlemler)
5-)updated
Veride değişiklik olduktan sonra çağırılır DOM’da ve sanal DOM’da veriler değiştiriliğ yeniden render edilir.
(Dom güncellendikten sonra yapacağımız işlemler)
6-)beforeDestroy
Vue instance nesnesi yok edilmeden önce çağrılacak metot.
(Vue örneği yok edilmeden önce yapılacak işlemler)
7-)Destroy
Vue instance nesnesi yok edildikten sonra çağrılacak metot.
(Vue örneği yok edildikten sonra yapılacak işlemler)
Örnek:
<template><div id="app"><input type="text" v-model="isim" /><br/>{{isim}}<br /><button @click="$destroy()">Destroy </button></div></template><script>export default {name: "App",data() {return {isim: "yasin",};},beforeCreate() {console.log("beforeCreate", "beforeCreate");},created() {console.log("created", "created");},mounted() {console.log("mounted", "mounted");},beforeUpdate(){console.log("beforeUpdate", "beforeUpdate");},updated(){console.log("updated","updated")},beforeDestroy(){console.log("beforeDestroy","beforeDestroy")},destroyed(){console.log("destroyed","destroyed")}};</script><style>#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>
İlk başta sırasıyla beforecreate,created,beforemount,mounted çalışacaktır.
Daha sonra input’a birşeyler yazdığımızda dom güncellemek için beforeupdate ve updated çalışacaktır.
Butona bastığımızda ise vue örneği yok edilecektir bunun için beforedestroy ve ardında destroy çalışacaktır.
Herkese İyi Çalışmalar Dilerim. :)
