Opowiedz o cyklu życia komponentu w Vue.js.

Cykl życia komponentu Vue.js to zbiór hooków wywoływanych na różnych etapach jego istnienia: od utworzenia do zniszczenia.

Główne hooki:

1. Tworzenie:

   • beforeCreate: Komponent został utworzony, ale dane i metody jeszcze nie są zainicjowane.
   • created: Komponent został utworzony, dane i metody są zainicjowane, ale DOM jeszcze nie jest wyrenderowany.

2. Montowanie:

   • beforeMount: Szablon został skompilowany, ale komponent jeszcze nie został dodany do DOM.
   • mounted: Komponent został dodany do DOM, można uzyskać dostęp do elementów DOM przez $el.

3. Aktualizacja:

   • beforeUpdate: Dane komponentu się zmieniły, ale DOM jeszcze nie został zaktualizowany.
   • updated: DOM został zaktualizowany po zmianie danych.

4. Odmontowanie:

   • beforeUnmount: Komponent jest usuwany z DOM. Tutaj można wyczyścić timery, nasłuchiwacze zdarzeń itp.
   • unmounted: Komponent został usunięty z DOM.

Oprócz głównych, dostępne są hooki do debugowania (Debug) i obsługi błędów (Error Handling):

• renderTracked: Śledzi zależności reaktywne podczas renderowania.
• renderTriggered: Wywoływany, gdy komponent musi zostać ponownie wyrenderowany z powodu zmiany stanu reaktywnego.
• errorCaptured: Przechwytuje błędy występujące w komponentach potomnych.

// Przykład użycia hooków
export default {
  data() {
    return {
      message: 'Witaj Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Komponent został utworzony, dane i metody nie są dostępne.');
  },
  created() {
    console.log('created: Komponent został utworzony, dane i metody są dostępne.');
    console.log('Wiadomość:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Szablon został skompilowany.');
  },
  mounted() {
    console.log('mounted: Komponent został dodany do DOM.');
    console.log('Element DOM:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Dane się zmieniły, DOM nie został jeszcze zaktualizowany.');
  },
  updated() {
    console.log('updated: DOM został zaktualizowany.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Komponent jest usuwany.');
  },
  unmounted() {
    console.log('unmounted: Komponent został usunięty z DOM.');
  }
};