Хуки жизненного цикла

В современном Vue 3 в Options API используются хуки жизненного цикла: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount и unmounted.

В Composition API им соответствуют функции-хуки вроде onBeforeMount, onMounted, onUpdated, onBeforeUnmount, onUnmounted и другие.

В Vue 2 набор похож, но вместо beforeUnmount/unmounted используются beforeDestroy/destroyed.

Жизненный цикл компонента Vue описывает путь от его создания до удаления из DOM, а хуки жизненного цикла позволяют «подключаться» к этим этапам для выполнения пользовательского кода.

• Options API (Vue 3): основные хуки — beforeCreate, created (инициализация состояния), beforeMount, mounted (работа с DOM), beforeUpdate, updated (реакция на изменения данных), beforeUnmount, unmounted (освобождение ресурсов перед удалением компонента).
• Composition API (Vue 3): используются функции-хуки onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, а также дополнительные onErrorCaptured, onActivated, onDeactivated и др., которые вызываются в те же моменты жизненного цикла, но описываются внутри функции setup.
• Отличия от Vue 2: в Vue 2 используются те же этапы, но хуки удаления называются beforeDestroy и destroyed; при миграции на Vue 3 их заменяют на beforeUnmount и unmounted, логика вызовов при этом остаётся прежней.
• Практическое применение: типичные сценарии — подписки на события и таймеры в mounted / onMounted, их отписка в beforeUnmount/onUnmounted, начальная загрузка данных в created или onMounted, а также логирование и отладка в beforeUpdate/updated.

Дополнительно существуют хуки для специфичных случаев, например, activated/deactivated (и их аналоги в Composition API), которые срабатывают для компонентов, обёрнутых в <keep-alive>, когда они активируются или деактивируются без полного уничтожения.