Mondja el egy Vue.js komponens életciklusát.

A Vue.js komponens életciklusa egy hook-okból álló sorozat, amelyet a létezésének különböző szakaszaiban hívnak meg: a létrehozástól a megsemmisítésig.

Fő hook-ok:

1. Létrehozás:

   • beforeCreate: A komponens létrejött, de az adatok és metódusok még nem inicializálódtak.
   • created: A komponens létrejött, az adatok és metódusok inicializálva, de a DOM még nem renderelt.

2. Csatlakoztatás:

   • beforeMount: A sablon lefordult, de a komponens még nem került be a DOM-ba.
   • mounted: A komponens be lett helyezve a DOM-ba, hozzáférés a DOM elemekhez $el-en keresztül.

3. Frissítés:

   • beforeUpdate: A komponens adatai megváltoztak, de a DOM még nem frissült.
   • updated: A DOM frissítve lett az adatok változása után.

4. Eltávolítás:

   • beforeUnmount: A komponens a DOM-ból való eltávolítás előtt áll. Itt tisztíthatók időzítők, eseményfigyelők stb.
   • unmounted: A komponens eltávolításra került a DOM-ból.

A fő hook-okon kívül vannak hibakereséshez (Debug) és hibakezeléshez (Error Handling) kapcsolódó hook-ok:

• renderTracked: Követi a reaktív függőségeket a renderelés során.
• renderTriggered: Akkor hívódik, amikor a komponens újrarenderelése szükséges a reaktív állapot változása miatt.
• errorCaptured: Elfogja a gyermek komponensekben keletkező hibákat.

// Hookok használatának példája
export default {
  data() {
    return {
      message: 'Helló Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: A komponens létrejött, az adatok és metódusok nem elérhetők.');
  },
  created() {
    console.log('created: A komponens létrejött, az adatok és metódusok elérhetők.');
    console.log('Üzenet:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: A sablon lefordult.');
  },
  mounted() {
    console.log('mounted: A komponens be lett helyezve a DOM-ba.');
    console.log('DOM elem:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Az adatok megváltoztak, a DOM még nem frissült.');
  },
  updated() {
    console.log('updated: A DOM frissítve lett.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: A komponens eltávolításra kerül.');
  },
  unmounted() {
    console.log('unmounted: A komponens eltávolításra került a DOM-ból.');
  }
};