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

Основные этапы и хуки:

Создание (Creation):
- beforeCreate: Компонент только инициализирован, данные и события еще не доступны.
- created: Компонент создан, реактивные данные инициализированы, доступны свойства data и methods, можно делать асинхронные запросы.
Монтирование (Mounting):
- beforeMount: Шаблон скомпилирован, но еще не смонтирован в DOM.
- mounted: Компонент смонтирован в DOM. Здесь уместно получать доступ к элементам DOM или интегрироваться со сторонними библиотеками, манипулирующими DOM.
Обновление (Updating):
- beforeUpdate: Реактивные данные изменились, но DOM еще не обновлен.
- updated: DOM обновлен после изменения данных.
Размонтирование (Unmounting / Destruction):
- beforeUnmount: Компонент собирается быть размонтированным из DOM. Здесь нужно выполнять очистку: отписываться от событий, отменять таймеры и т.д.
- unmounted: Компонент размонтирован из DOM, полностью уничтожен.

Жизненный цикл можно представить схемой:

graph LR
  A[Компонент создан] --> B(beforeCreate);
  B --> C(created);
  C --> D(beforeMount);
  D --> E(mounted);
  E --> F(Реактивные данные изменены);
  F --> G(beforeUpdate);
  G --> J(DOM обновлен);
  J --> H(updated);
  J --> K(Компонент размонтирован);
  K --> L(beforeUnmount);
  L --> M(unmounted);
  H --> F; // Цикл обновления

Пример использования хуков:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate: Данные:', this.message) // undefined
  },
  created() {
    console.log('created: Данные:', this.message) // Hello Vue!
  },
  beforeMount() {
    console.log('beforeMount: Элемент в DOM:', this.$el) // undefined
  },
  mounted() {
    console.log('mounted: Элемент в DOM:', this.$el) // Наличие элемента div
  },
  beforeUpdate() {
    console.log('beforeUpdate: Старый элемент в DOM:', this.$el.textContent) // Старое значение
  },
  updated() {
    console.log('updated: Новый элемент в DOM:', this.$el.textContent) // Новое значение после обновления
  },
  beforeUnmount() {
    console.log('beforeUnmount: Компонент скоро будет уничтожен')
  },
  unmounted() {
    console.log('unmounted: Компонент уничтожен')
  }
}
</script>

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