Povězte mi o životním cyklu komponenty ve Vue.js.

Životní cyklus komponenty Vue.js je sada hooků, které jsou volány v různých fázích její existence: od vytvoření po zničení.

Hlavní hooky:

1. Vytvoření:

   • beforeCreate: Komponenta byla vytvořena, ale data a metody ještě nejsou inicializovány.
   • created: Komponenta byla vytvořena, data a metody jsou inicializovány, ale DOM ještě není vykreslen.

2. Montáž:

   • beforeMount: Šablona byla zkompilována, ale komponenta ještě nebyla vložena do DOM.
   • mounted: Komponenta byla vložena do DOM, lze přistupovat k prvkům DOM přes $el.

3. Aktualizace:

   • beforeUpdate: Data komponenty se změnila, ale DOM ještě nebyl aktualizován.
   • updated: DOM byl po změně dat aktualizován.

4. Odstranění:

   • beforeUnmount: Komponenta se chystá být odstraněna z DOM. Zde lze vyčistit časovače, posluchače událostí atd.
   • unmounted: Komponenta byla odstraněna z DOM.

Kromě hlavních hooků existují hooky pro ladění (Debug) a zpracování chyb (Error Handling):

• renderTracked: Sleduje reaktivní závislosti během renderování.
• renderTriggered: Volá se, když je třeba komponentu znovu vykreslit kvůli změně reaktivního stavu.
• errorCaptured: Zachytává chyby, které vznikly v dětských komponentách.

// Příklad použití hooků
export default {
  data() {
    return {
      message: 'Ahoj Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Komponenta byla vytvořena, data a metody nejsou dostupné.');
  },
  created() {
    console.log('created: Komponenta byla vytvořena, data a metody jsou dostupné.');
    console.log('Zpráva:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Šablona byla zkompilována.');
  },
  mounted() {
    console.log('mounted: Komponenta byla vložena do DOM.');
    console.log('Prvek DOM:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Data se změnila, DOM ještě nebyl aktualizován.');
  },
  updated() {
    console.log('updated: DOM byl aktualizován.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Komponenta se odstraňuje.');
  },
  unmounted() {
    console.log('unmounted: Komponenta byla odstraněna z DOM.');
  }
};