Разкажете за жизнения цикъл на компонент във Vue.js…

Цикълът на живот на компонент Vue.js е набор от хукове, които се извикват в различни етапи от съществуването му: от създаването до унищожаването.

Основни хукове:

Създаване:
- beforeCreate: Компонентът е създаден, но данните и методите все още не са инициализирани.
- created: Компонентът е създаден, данните и методите са инициализирани, но DOM все още не е рендериран.
Монтиране:
- beforeMount: Шаблонът е компилиран, но компонентът все още не е добавен към DOM.
- mounted: Компонентът е добавен към DOM, може да се достъпва до елементите на DOM чрез $el.
Актуализиране:
- beforeUpdate: Данните на компонента са променени, но DOM все още не е актуализиран.
- updated: DOM е актуализиран след промяната на данните.
Разглобяване:
- beforeUnmount: Компонентът се подготвя за премахване от DOM. Тук може да се почистят таймери, слушатели на събития и др.
- unmounted: Компонентът е премахнат от DOM.

Освен основните, има хукове за отстраняване на грешки (Debug) и работа с грешки (Error Handling):

renderTracked: Следи реактивните зависимости по време на рендериране.
renderTriggered: Извиква се, когато компонентът трябва да бъде рендериран отново поради промяна в реактивното състояние.
errorCaptured: Засича грешки, възникнали в дъщерните компоненти.

// Пример за използване на хукове
export default {
  data() {
    return {
      message: 'Здравей Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: Компонентът е създаден, данните и методите не са достъпни.');
  },
  created() {
    console.log('created: Компонентът е създаден, данните и методите са достъпни.');
    console.log('Съобщение:', this.message);
  },
  beforeMount() {
    console.log('beforeMount: Шаблонът е компилиран.');
  },
  mounted() {
    console.log('mounted: Компонентът е добавен към DOM.');
    console.log('Елемент DOM:', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: Данните са променени, DOM не е актуализиран.');
  },
  updated() {
    console.log('updated: DOM е актуализиран.');
  },
  beforeUnmount() {
    console.log('beforeUnmount: Компонентът се премахва.');
  },
  unmounted() {
    console.log('unmounted: Компонентът е премахнат от DOM.');
  }
};

Разкажете за жизнения цикъл на компонент във Vue.js.