> Какие хуки жизненного цикла существуют во Vue и для чего они нужны (Vue.js)

Короткий ответ

Во Vue 2 - 8 хуков: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed. Во Vue 3 добавлены beforeUnmount, unmounted вместо beforeDestroy/destroyed, и Composition API предоставляет onBeforeMount, onMounted и т.д. Хуки позволяют выполнять код на определённых этапах жизненного цикла компонента: инициализация данных, работа с DOM, подписка на события, очистка ресурсов.

Подробное объяснение

Жизненный цикл компонента Vue состоит из четырёх основных фаз: создание (creation), монтирование (mounting), обновление (updating) и уничтожение (destruction). Каждая фаза имеет два хука - до и после события.

Фаза создания:

• beforeCreate - компонент инициализирован, но data и methods ещё недоступны. Используется редко, например, для инициализации внешних библиотек.
• created - data и methods уже доступны, но DOM ещё не создан. Подходит для запросов к API, инициализации данных.

Фаза монтирования:

• beforeMount - шаблон скомпилирован, но DOM ещё не вставлен. Можно выполнить последние изменения перед рендерингом.
• mounted - компонент вставлен в DOM, доступны refs и дочерние элементы. Здесь работают с DOM, подписываются на события, запускают анимации.

Фаза обновления:

• beforeUpdate - данные изменились, но DOM ещё не обновлён. Используется для логики перед перерендером.
• updated - DOM обновлён. Осторожно: может вызываться часто, избегайте мутаций данных здесь.

Фаза уничтожения:

• beforeDestroy / beforeUnmount - компонент ещё работает, но будет удалён. Отписывайтесь от событий, очищайте таймеры.
• destroyed / unmounted - компонент удалён, все директивы отвязаны. Финальная очистка.

Во Vue 3 с Composition API хуки вызываются через функции onBeforeMount, onMounted и т.д. внутри setup(). Они работают аналогично, но дают больше гибкости для группировки логики.

На практике

Для senior-уровня важно понимать не только порядок хуков, но и их практические ограничения:

• created vs mounted: created быстрее, но без DOM. Для SSR используйте только created, так как mounted не вызывается на сервере.
• beforeUpdate: никогда не изменяйте данные здесь - это вызовет бесконечный цикл.
• updated: избегайте прямых манипуляций с DOM, используйте nextTick.
• beforeUnmount: критически важно очищать подписки (event listeners, observers, timers), чтобы избежать утечек памяти.
• errorCaptured (Vue 3): хук для обработки ошибок в дочерних компонентах, полезен для глобального error boundary.

В крупных проектах часто используют хуки для:

• Интеграции с внешними библиотеками (mounted - инициализация, beforeUnmount - деинициализация).
• Логирования и аналитики (created - сбор метрик, beforeUnmount - отправка).
• Управления анимациями (mounted - старт, beforeUnmount - завершение).

Пример кода

<script setup>
import { ref, onMounted, onBeforeUnmount, onErrorCaptured } from 'vue'

const count = ref(0)
let timer = null

onMounted(() => {
  // Запускаем таймер после монтирования
  timer = setInterval(() => {
    count.value++
  }, 1000)
})

onBeforeUnmount(() => {
  // Очищаем таймер перед удалением компонента
  if (timer) {
    clearInterval(timer)
    timer = null
  }
})

onErrorCaptured((err, instance, info) => {
  console.error('Ошибка в дочернем компоненте:', err, info)
  return false // предотвращаем всплытие ошибки
})
</script>

Как отвечать на собеседовании

Начните с перечисления хуков в порядке жизненного цикла, затем объясните назначение каждого. Для senior-уровня обязательно упомяните:

• Различия между Vue 2 и Vue 3 (переименование beforeDestroy/destroyed).
• Composition API хуки (onMounted и т.д.) и их преимущества (лучшая группировка логики).
• Практические кейсы: когда использовать created vs mounted, как избегать утечек памяти.
• Обработку ошибок через errorCaptured.

Приведите пример из реального проекта: как вы использовали mounted для интеграции с chart library и beforeUnmount для очистки.

Что проверяет интервьюер

• Понимание последовательности фаз жизненного цикла и когда какой хук вызывается.
• Умение выбирать правильный хук для конкретной задачи (например, запросы в created, DOM-операции в mounted).
• Знание подводных камней (бесконечные циклы в beforeUpdate, утечки памяти при отсутствии очистки).
• Опыт работы с Composition API и миграцией с Options API.
• Понимание SSR-ограничений (mounted не работает на сервере).

Типичные ошибки

• Путаница между created и mounted: пытаются работать с DOM в created.
• Изменение данных в beforeUpdate или updated, что вызывает бесконечный рендер.
• Забывают отписываться от событий в beforeUnmount, особенно при использовании addEventListener.
• Используют хуки Vue 2 (beforeDestroy) в проекте на Vue 3 без адаптации.
• Пытаются вызвать асинхронные операции в beforeCreate, где data ещё недоступна.
• Не учитывают, что хуки в Composition API не имеют доступа к this (используют setup вместо этого).