Хуки жизненного цикла во Vue 3: onMounted, onUpdated, onUnmounted и другие

Vue 3 позволяет точно управлять поведением компонента на каждом этапе его существования: от создания и появления на странице до удаления.
Для этого используются хуки жизненного цикла — специальные функции, которые позволяют выполнять код в нужный момент.

🧩 1. Что такое жизненный цикл компонента

Каждый компонент во Vue проходит несколько стадий:

Создание — инициализация данных, props и реактивности.
Монтирование (mount) — компонент появляется в DOM.
Обновление (update) — реактивные данные изменились, и интерфейс перерисовывается.
Размонтирование (unmount) — компонент удаляется, нужно освободить ресурсы.

Vue 3 позволяет «вмешиваться» в эти стадии с помощью хуков, например:
onMounted, onUpdated, onUnmounted и других.

🧠 2. Основные хуки жизненного цикла

В Composition API все хуки — это функции, импортируемые из vue и вызываемые внутри <script setup> или setup().

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

const count = ref(0)

onMounted(() => {
  console.log('✅ Компонент смонтирован в DOM')
})

onUpdated(() => {
  console.log('🔁 Компонент обновился. Текущее значение:', count.value)
})

onUnmounted(() => {
  console.log('❌ Компонент удалён')
})
</script>

<template>
  <button @click="count++">Кликнули {{ count }} раз</button>
</template>

Когда вы нажимаете на кнопку, count обновляется → Vue вызывает onUpdated.
Если компонент исчезает со страницы — срабатывает onUnmounted.

⚙️ 3. Все основные хуки Vue 3

Создание

onBeforeMount - перед тем, как компонент добавится в DOM

onMounted - сразу после появления компонента в DOM

Обновление

onBeforeUpdate - перед обновлением реактивных данных

onUpdated - после обновления шаблона

Удаление

onBeforeUnmount - перед удалением компонента

onUnmounted - после удаления компонента

🧬 4. Практический пример: работа с событиями

Часто хуки нужны, чтобы подписаться на события или запустить асинхронную операцию.
Например, подписка на событие resize и её очистка при удалении компонента:

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

function onResize() {
  console.log('Размер окна:', window.innerWidth)
}

onMounted(() => {
  window.addEventListener('resize', onResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onResize)
})
</script>

<template>
  <p>Открой консоль и измени размер окна</p>
</template>

Такой подход предотвращает утечки памяти и делает компонент устойчивым.

🧩 5. Сравнение с Options API

В старом синтаксисе хуки выглядели как методы объекта компонента:

export default {
  mounted() {
    console.log('Компонент смонтирован')
  },
  updated() {
    console.log('Компонент обновлён')
  },
  unmounted() {
    console.log('Компонент удалён')
  }
}

Composition API делает их более гибкими — можно вызывать хуки в любом месте, даже внутри пользовательских функций (composables).

💡 6. Почему это важно

Хуки жизненного цикла позволяют:

безопасно работать с DOM и сторонними библиотеками;
загружать данные при монтировании;
очищать слушатели событий и таймеры при размонтировании;
контролировать поведение компонентов в реальном времени.

🚀 Заключение

Теперь вы знаете, как использовать хуки жизненного цикла во Vue 3, чтобы выполнять код в нужный момент жизни компонента.
Это фундамент для работы с асинхронными операциями, внешними API, таймерами и подписками.

Хуки жизненного цикла во Vue 3 — контроль за жизнью компонента