Porozprávajte o životnom cykle komponentu vo Vue.js.

Životný cyklus komponentu Vue.js je súbor hookov, ktoré sa volajú v rôznych fázach jej existencie: od vytvorenia po zničenie.

Hlavné hooky:

1. Vytvorenie:

   • beforeCreate: Komponenta bola vytvorená, ale údaje a metódy ešte nie sú inicializované.
   • created: Komponenta bola vytvorená, údaje a metódy sú inicializované, ale DOM ešte nie je vykreslený.

2. Montáž:

   • beforeMount: Šablóna bola skompilovaná, ale komponent ešte nebol pridaný do DOM.
   • mounted: Komponent bol pridaný do DOM, prístup k prvkom DOM cez $el je možný.

3. Aktualizácia:

   • beforeUpdate: Dáta komponentu sa zmenili, ale DOM ešte nebol aktualizovaný.
   • updated: DOM bol po zmene dát aktualizovaný.

4. Demontáž:

   • beforeUnmount: Komponent sa chystá byť odstránený z DOM. Tu je možné vyčistiť časovače, poslucháče udalostí atď.
   • unmounted: Komponent bol odstránený z DOM.

Okrem hlavných hookov existujú hooky na ladenie (Debug) a spracovanie chýb (Error Handling):

• renderTracked: Sleduje reaktívne závislosti počas renderovania.
• renderTriggered: Volá sa, keď je potrebné komponentu znovu renderovať kvôli zmene v reaktívnom stave.
• errorCaptured: Zachytáva chyby, ktoré vznikli v deťoch komponentoch.

// Príklad použitia hookov
export default {
  data() {
    return {
      message: 'Ahoj Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Komponenta bola vytvorená, údaje a metódy nie sú dostupné.');
  },
  created() {
    console.log('created: Komponenta bola vytvorená, údaje a metódy sú dostupné.');
    console.log('Správa:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Šablóna bola skompilovaná.');
  },
  mounted() {
    console.log('mounted: Komponent bol pridaný do DOM.');
    console.log('Prvok DOM:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Dáta sa zmenili, DOM ešte nebol aktualizovaný.');
  },
  updated() {
    console.log('updated: DOM bol aktualizovaný.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Komponent sa odstraňuje.');
  },
  unmounted() {
    console.log('unmounted: Komponent bol odstránený z DOM.');
  }
};