Lifecycle Hooks Nedir?

Vue.js'in yaşam döngüsü (lifecycle hooks), Vue örneğinin (instance) yaratılmasından yok olana kadar geçirdiği çeşitli aşamalarda çalışan özel fonksiyonlardır. Bu kancalar, bir Vue bileşeninin (component) yaşam döngüsü boyunca belirli zamanlarda tetiklenir ve geliştiricilere bu aşamalarda müdahale etme imkanı sunar. İşte en yaygın Vue.js yaşam döngüsü ve bunların işlevleri:

1. beforeCreate: Bu kanca, Vue örneği yaratılmadan hemen önce çalışır. Bu aşamada, data ve olaylar (events) henüz kurulmamıştır.
2. created: Bu kanca, Vue örneği yaratıldıktan hemen sonra çalışır. Bu aşamada, data ve metodlar (methods) erişilebilir durumdadır, ancak DOM henüz monte edilmemiş ve $el property'si mevcut değildir.
3. beforeMount: Bu kanca, DOM'a monte edilmeden hemen önce çalışır. Bu aşamada, şablon (template) veya render fonksiyonu sanal DOM'a render edilmiş, ancak gerçek DOM'a uygulanmamıştır.
4. mounted: Bu kanca, Vue örneği DOM'a monte edildikten sonra çalışır. Bu aşamada, bileşenin tamamı render edilmiş ve DOM'a uygulanmıştır.
5. beforeUpdate: Bu kanca, reaktif verilerde bir değişiklik olduğunda ve DOM güncellenmeden önce çalışır.
6. updated: Bu kanca, reaktif veri değişikliklerinin DOM'a uygulandıktan sonra çalışır.
7. beforeDestroy: Bu kanca, Vue örneği yok edilmeden hemen önce çalışır. Bu aşamada, örnek hala tamamen işlevseldir.
8. destroyed: Bu kanca, Vue örneği yok edildikten sonra çalışır. Bu aşamada, tüm olay dinleyicileri (event listeners) ve bağlı tüm alt bileşenler yok edilmiştir.

Bu kancalar, Vue bileşenlerinin yaşam döngüsünü yönetmek ve çeşitli aşamalarda özel işlemler gerçekleştirmek için kullanılır. Örneğin, API'dan veri çekme, olay dinleyicileri ayarlama veya temizleme gibi işlemler bu kancalar aracılığıyla gerçekleştirilebilir.

Not (Vue 3): Vue 3'te beforeDestroy ve destroyed kancalarının adı beforeUnmount ve unmounted olarak değişmiştir. Composition API'de bu kancaların karşılıkları onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount ve onUnmounted fonksiyonlarıdır; beforeCreate ve created yerine kod doğrudan setup içinde yazılır.