Ispričajte mi o životnom ciklusu komponenta u Vue.js…

Životni ciklus Vue.js komponente je skup hook-ova koji se pozivaju u različitim fazama njenog postojanja: od kreiranja do uništenja.

Glavni hook-ovi:

Kreiranje:
- beforeCreate: Komponenta je kreirana, ali podaci i metode još nisu inicijalizovani.
- created: Komponenta je kreirana, podaci i metode su inicijalizovani, ali DOM još nije renderovan.
Montiranje:
- beforeMount: Šablon je kompajliran, ali komponenta još nije ubačena u DOM.
- mounted: Komponenta je ubačena u DOM, pristup elementima DOM-a putem $el je moguć.
Ažuriranje:
- beforeUpdate: Podaci komponente su se promenili, ali DOM još nije ažuriran.
- updated: DOM je ažuriran nakon promene podataka.
Demontiranje:
- beforeUnmount: Komponenta se priprema za uklanjanje iz DOM-a. Ovde se mogu očistiti tajmeri, slušaoci događaja itd.
- unmounted: Komponenta je uklonjena iz DOM-a.

Pored glavnih hook-ova, postoje hook-ovi za debug (Debug) i rukovanje greškama (Error Handling):

renderTracked: Prati reaktivne zavisnosti tokom renderovanja.
renderTriggered: Poziva se kada komponenta treba da se ponovo renderuje zbog promene reaktivnog stanja.
errorCaptured: Presreće greške koje su nastale u decom komponentama.

// Primer korišćenja hook-ova
export default {
  data() {
    return {
      message: 'Zdravo Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Komponenta je kreirana, podaci i metode nisu dostupni.');
  },
  created() {
    console.log('created: Komponenta je kreirana, podaci i metode su dostupni.');
    console.log('Poruka:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Šablon je kompajliran.');
  },
  mounted() {
    console.log('mounted: Komponenta je ubačena u DOM.');
    console.log('Element DOM-a:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Podaci su se promenili, DOM još nije ažuriran.');
  },
  updated() {
    console.log('updated: DOM je ažuriran.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Komponenta se uklanja.');
  },
  unmounted() {
    console.log('unmounted: Komponenta je uklonjena iz DOM-a.');
  }
};

Ispričajte mi o životnom ciklusu komponenta u Vue.js.