Сколько всего хуков жизненного цикла во Vue?

Количество хуков жизненного цикла во Vue

В Vue 3, который является текущей основной версией на момент 2024 года, существует 8 основных хуков жизненного цикла, доступных в Composition API, и аналогичный набор (с небольшими отличиями в именовании) в Options API. Важно понимать, что количество может варьироваться в зависимости от рассматриваемой версии Vue и API, но в современном Vue мы говорим о следующих основных хуках.

Основные хуки в Composition API (Vue 3)

В Composition API хуки импортируются из vue и используются внутри setup() или <script setup>:

import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount, onErrorCaptured, onActivated } from 'vue'

Полный список основных хуков:

1. onBeforeMount — вызывается непосредственно перед монтированием компонента в DOM.
2. onMounted — вызывается после того, как компонент смонтирован, все DOM-элементы доступны. Используется для side effects, требующих DOM (например, инициализация библиотек).
3. onBeforeUpdate — вызывается перед обновлением компонента из-за изменения реактивных данных, но до повторного рендеринга DOM. Позволяет работать с текущим состоянием DOM.
4. onUpdated — вызывается после обновления компонента и перерисовки DOM. Опасен для бесконечных циклов, если изменять зависимые данные внутри.
5. onBeforeUnmount — вызывается непосредственно перед размонтированием компонента. Идеальное место для очистки таймеров, отписок от событий, отмены HTTP-запросов.
6. onUnmounted — вызывается после полного размонтирования компонента.
7. onErrorCaptured — вызывается при перехвате ошибки из любого дочернего компонента. Позволяет реализовать глобальную обработку ошибок.
8. onActivated — специфичный хук для компонентов, обернутых в <KeepAlive>, вызывается при повторной активации кэшированного компонента.
9. onDeactivated — аналогично, вызывается при деактивации и переходе компонента в кэш <KeepAlive>.

Таким образом, основных и часто используемых хуков — 8, а с учетом кэширования через KeepAlive — 10.

Сравнение с Options API (Vue 2 и Vue 3)

В Options API хуки объявляются как методы на компоненте. Их названия слегка отличаются, и они напрямую соответствуют Composition API:

export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {}, // В Vue 2 был beforeDestroy
  unmounted() {}, // В Vue 2 был destroyed
  errorCaptured() {},
  activated() {},
  deactivated() {},
}

Здесь важно отметить два устаревших хука из Vue 2, которые были переименованы в Vue 3 для единообразия: beforeDestroy → beforeUnmount, destroyed → unmounted. Также в Options API существуют два дополнительных ранних хука, которых нет в явном виде в Composition API:

• beforeCreate() — вызывается сразу после инициализации экземпляра, до настройки реактивности.
• created() — вызывается после создания экземпляра и настройки реактивности, но до монтирования DOM.

В Composition API их эквивалентом является просто код, написанный непосредственно в setup() до любого объявления хуков.

Редко используемые хуки (Навигационные хуки в маршрутизаторе)

Отдельно стоит упомянуть навигационные хуки Vue Router, которые также являются частью жизненного цикла компонента, но связаны с маршрутизацией. Они доступны в компонентах маршрута:

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

Они не включены в общий подсчет "хуков жизненного цикла компонента", так как относятся к специфике маршрутизации.

Итог

• Vue 3 Composition API: Базовых хуков — 8 (onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onActivated/onDeactivated).
• Vue 3 Options API: Базовых хуков — 11 (включая beforeCreate, created и переименованные beforeUnmount/unmounted).
• Vue 2 Options API: Базовых хуков — 11 (с именами beforeDestroy и destroyed).

Ключевой вывод: говоря о современном Vue 3 в контексте Composition API, правильным ответом будет 8 основных хуков, но с важным уточнением о существовании onActivated/onDeactivated для <KeepAlive> и исторических отличиях в Options API. Знание назначения каждого хука критически важнее, чем запоминание их точного количества.