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

Узнаём, как «живёт» компонент от создания до удаления, и в какие моменты можно вклиниться через хуки жизненного цикла.

Хук жизненного цикла — функция, которую Vue вызывает в определённый момент жизни компонента: при появлении на странице, обновлении или удалении.

Жизнь компонента

Компонент проходит этапы: его создают, монтируют в DOM, он обновляется при изменении данных и в конце размонтируется, когда исчезает с экрана. Хуки дают возможность выполнить код на каждом этапе.

Хук	Когда срабатывает	Зачем
`onMounted`	компонент вставлен в DOM	запрос к API, доступ к элементу, подписки
`onUpdated`	после перерисовки из-за изменения данных	реакция на обновлённый DOM
`onUnmounted`	компонент удалён из DOM	очистка: таймеры, слушатели, соединения

onMounted: самый частый хук

В onMounted компонент уже на странице — здесь обычно загружают данные с сервера и обращаются к DOM-элементам:

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

const message = ref('Загрузка...')

onMounted(() => {
  console.log('Компонент появился на странице')
  message.value = 'Готово!'
})
</script>

onUnmounted: уборка за собой

Если в onMounted вы что-то создали (таймер, слушатель события окна), это нужно убрать в onUnmounted — иначе будет утечка памяти и «фантомные» вызовы:

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

const seconds = ref(0)
let timer

onMounted(() => {
  timer = setInterval(() => { seconds.value++ }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)   // обязательно очистить!
})
</script>

Порядок хуков на JS

Чтобы запомнить последовательность, смоделируем жизненный цикл вызовами в нужном порядке:

const log = [];

function created()    { log.push("created: данные готовы"); }
function mounted()    { log.push("mounted: компонент в DOM"); }
function updated()    { log.push("updated: данные изменились"); }
function unmounted()  { log.push("unmounted: компонент удалён"); }

// типичный жизненный путь
created();
mounted();
updated();            // что-то поменялось
updated();            // и ещё раз
unmounted();

log.forEach((line, i) => console.log(`${i + 1}. ${line}`));

Вывод:

1. created: данные готовы
2. mounted: компонент в DOM
3. updated: данные изменились
4. updated: данные изменились
5. unmounted: компонент удалён

Частая ошибка

Не пытайтесь обратиться к DOM-элементу в самом начале <script setup> — там его ещё нет, элемент появится только к onMounted. И не забывайте очищать ресурсы в onUnmounted: незакрытый setInterval продолжит тикать даже после исчезновения компонента.

Итог

Компонент проходит этапы: создание, монтирование, обновления, размонтирование.
onMounted — компонент в DOM: здесь запросы к API и доступ к элементам.
onUnmounted — очистка таймеров, слушателей и подписок.
Что создали в onMounted, то убирайте в onUnmounted.