Vue.js'de bir bileşenin yaşam döngüsü hakkında bilgi verin.

Vue.js bileşeninin yaşam döngüsü, varoluşunun farklı aşamalarında çağrılan bir dizi kancadır: oluşturulmadan yok edilmesine kadar.

Ana kancalar:

1. Oluşum:

   • beforeCreate: Bileşen oluşturuldu, ancak veriler ve yöntemler henüz başlatılmadı.
   • created: Bileşen oluşturuldu, veriler ve yöntemler başlatıldı, ancak DOM henüz çizilmedi.

2. Montaj:

   • beforeMount: Şablon derlendi, ancak bileşen henüz DOM'a eklenmedi.
   • mounted: Bileşen DOM'a eklendi, $el aracılığıyla DOM öğelerine erişilebilir.

3. Güncelleme:

   • beforeUpdate: Bileşenin verileri değişti, ancak DOM henüz güncellenmedi.
   • updated: Veri değişikliğinden sonra DOM güncellendi.

4. Kaldırma:

   • beforeUnmount: Bileşen DOM'dan kaldırılmak üzere. Burada zamanlayıcılar, olay dinleyicileri vb. temizlenebilir.
   • unmounted: Bileşen DOM'dan kaldırıldı.

Ana kancalara ek olarak, hata ayıklama (Debug) ve hata yönetimi (Error Handling) için kancalar da vardır:

• renderTracked: Render sırasında reaktif bağımlılıkları izler.
• renderTriggered: Reaktif durumu değiştiğinde bileşenin yeniden render edilmesi gerektiğinde çağrılır.
• errorCaptured: Çocuk bileşenlerde oluşan hataları yakalar.

// Kancaların kullanım örneği
export default {
  data() {
    return {
      message: 'Merhaba Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Bileşen oluşturuldu, veriler ve yöntemler erişilebilir değil.');
  },
  created() {
    console.log('created: Bileşen oluşturuldu, veriler ve yöntemler erişilebilir.');
    console.log('Mesaj:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Şablon derlendi.');
  },
  mounted() {
    console.log('mounted: Bileşen DOM'a eklendi.');
    console.log('DOM elementi:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Veriler değişti, DOM güncellenmedi.');
  },
  updated() {
    console.log('updated: DOM güncellendi.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Bileşen kaldırılıyor.');
  },
  unmounted() {
    console.log('unmounted: Bileşen DOM'dan kaldırıldı.');
  }
};