Какие хуки жизненного цикла есть у компонента Vue?

Вопрос

Какие есть хуки жизненного цикла компонента во Vue 3 и когда они вызываются?

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

Основные хуки в Composition API: onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted — они отражают этапы создания, обновления и удаления компонента.

Подробный ответ

• onMounted — компонент вставлен в DOM. Здесь безопасно обращаться к ref DOM-элементов, делать запросы к API, подписываться на внешние события.
• onUpdated — DOM обновился после изменения реактивных данных. Использовать осторожно — можно случайно вызвать бесконечный цикл обновлений.
• onUnmounted — компонент удалён из DOM. Место для очистки: снятие обработчиков событий, отмена таймеров/подписок (утечки памяти — частая ошибка при их пропуске).
• onBeforeMount/onBeforeUpdate/onBeforeUnmount — те же события, но до применения изменений.

В <script setup> эти хуки — обычные импортируемые функции, вызываются напрямую в теле компонента (не внутри условий/циклов — как и любые хуки Vue/React).

Пример

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

const width = ref(window.innerWidth)

function handleResize() {
  width.value = window.innerWidth
}

onMounted(() => window.addEventListener('resize', handleResize))
onUnmounted(() => window.removeEventListener('resize', handleResize))
</script>

Дополнительные вопросы

• Почему обработчики нужно снимать в onUnmounted?
• В чём разница между onMounted компонента и onMounted внутри composable?
• Как хуки жизненного цикла работают с <KeepAlive> (onActivated/onDeactivated)?