Papaskokite apie komponento gyvavimo ciklą Vue.js…

Vue.js komponento gyvavimo ciklas yra rinkinys kabliukų, kurie kviečiami įvairiuose jo egzistavimo etapuose: nuo sukūrimo iki sunaikinimo.

Pagrindiniai kabliukai:

Sukūrimas:
- beforeCreate: Komponentas sukurtas, bet duomenys ir metodai dar nėra inicializuoti.
- created: Komponentas sukurtas, duomenys ir metodai inicializuoti, bet DOM dar nėra atvaizduotas.
Montavimas:
- beforeMount: Šablonas sukompiliuotas, bet komponentas dar nėra įterptas į DOM.
- mounted: Komponentas įterptas į DOM, galima pasiekti DOM elementus per $el.
Atnaujinimas:
- beforeUpdate: Komponento duomenys pasikeitė, bet DOM dar ne atnaujintas.
- updated: DOM atnaujintas po duomenų pakeitimo.
Išmontavimas:
- beforeUnmount: Komponentas ruošiasi būti pašalintas iš DOM.
- unmounted: Komponentas pašalintas iš DOM.

Be pagrindinių, yra kabliukai klaidų ir derinimo tikslais:

renderTracked: Stebi reaktyvias priklausomybes renderinimo metu.
renderTriggered: Kviečiama, kai komponento reakcijos būsenos pasikeitimas reikalauja pakartotinai atvaizduoti.
errorCaptured: Sugauja klaidas, įvykusias vaikų komponentuose.

// Kabliukų naudojimo pavyzdys
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Komponentas sukurtas, duomenys ir metodai dar neprieinami.');
  },
  created() {
    console.log('created: Komponentas sukurtas, duomenys ir metodai prieinami.');
    console.log('Message:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Šablonas sukompiliuotas.');
  },
  mounted() {
    console.log('mounted: Komponentas įterptas į DOM.');
    console.log('DOM elementas:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Duomenys pasikeitė, bet DOM dar ne atnaujintas.');
  },
  updated() {
    console.log('updated: DOM atnaujintas.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Komponentas ruošiasi būti pašalintas.');
  },
  unmounted() {
    console.log('unmounted: Komponentas pašalintas.');
  }
};

Papaskokite apie komponento gyvavimo ciklą Vue.js.