Vue.js-də komponentin həyat dövrü haqqında danışın.

Vue.js komponentinin həyat dövrü onun mövcudluğu zamanı müxtəlif mərhələlərdə çağırılan hookların toplusudur: yaradılmasından tutmuş məhv edilməsinə qədər.

Əsas hooklar:

1. Yaradılma:

   • beforeCreate: Komponent yaradılıb, lakin məlumatlar və metodlar hələ inisializasiya olunmayıb.
   • created: Komponent yaradılıb, məlumatlar və metodlar inisializasiya olunub, lakin DOM hələ render olunmayıb.

2. Quraşdırma:

   • beforeMount: Şablon tərtib olunub, lakin komponent hələ DOM-a əlavə olunmayıb.
   • mounted: Komponent DOM-a əlavə olunub, $el vasitəsilə DOM elementlərinə daxil olmaq mümkündür.

3. Yeniləmə:

   • beforeUpdate: Komponentin məlumatları dəyişib, lakin DOM hələ yenilənməyib.
   • updated: Məlumatların dəyişməsindən sonra DOM yeniləndi.

4. Yox edilmə:

   • beforeUnmount: Komponent DOM-dan çıxarılır. Burada timerlər, hadisə dinləyiciləri və s. təmizlənə bilər.
   • unmounted: Komponent DOM-dan çıxarılıb.

Əsas hooklardan başqa, debug (Debug) və səhv idarəetməsi (Error Handling) üçün hooklar da mövcuddur:

• renderTracked: Render zamanı reaktiv asılılıqları izləyir.
• renderTriggered: Reaktiv vəziyyət dəyişdiyində, komponentin yenidən render olunması lazım gəldikdə çağırılır.
• errorCaptured: Uşaq komponentlərində baş verən səhvləri tutar.

// Hookların istifadəsi nümunəsi
export default {
  data() {
    return {
      message: 'Salam Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Komponent yaradılıb, məlumatlar və metodlar mövcud deyil.');
  },
  created() {
    console.log('created: Komponent yaradılıb, məlumatlar və metodlar mövcuddur.');
    console.log('Mesaj:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Şablon tərtib olunub.');
  },
  mounted() {
    console.log('mounted: Komponent DOM-a əlavə olunub.');
    console.log('DOM elementi:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Məlumatlar dəyişdi, DOM yenilənmədi.');
  },
  updated() {
    console.log('updated: DOM yeniləndi.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Komponent çıxarılır.');
  },
  unmounted() {
    console.log('unmounted: Komponent DOM-dan çıxarıldı.');
  }
};