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

Жизненный цикл компонента Vue.js — это набор хуков, которые вызываются на различных этапах его существования: от создания до уничтожения.

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

1. Создание:

   • beforeCreate: Компонент создан, но данные и методы еще не инициализированы.
   • created: Компонент создан, данные и методы инициализированы, но DOM еще не отрисован.

2. Монтирование:

   • beforeMount: Шаблон скомпилирован, но компонент еще не вставлен в DOM.
   • mounted: Компонент вставлен в DOM, можно получить доступ к элементам DOM через $el.

3. Обновление:

   • beforeUpdate: Данные компонента изменились, но DOM еще не обновлен.
   • updated: DOM обновлен после изменения данных.

4. Размонтирование:

   • beforeUnmount: Компонент собирается быть удаленным из DOM. Здесь можно очистить таймеры, слушатели событий и т.д.
   • unmounted: Компонент удален из DOM.

Кроме основных, есть хуки для отладки (Debug) и работы с ошибками (Error Handling):

• renderTracked: Отслеживает реактивные зависимости во время рендеринга.
• renderTriggered: Вызывается, когда компонент должен быть повторно отрендерен из-за изменения реактивного состояния.
• errorCaptured: Перехватывает ошибки, возникшие в дочерних компонентах.

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