\n```\n\n`onMounted` — место для DOM API, размеров, сторонних библиотек. Подписки, таймеры, listeners **обязательно** чистят в `onUnmounted`, иначе утечки.\n\nЕсть ещё `onActivated` / `onDeactivated` для ``, `onErrorCaptured` для ошибок в потомках. SSR: `onServerPrefetch`.\n\n## Итог\n\nХуки = точки жизненного цикла. На практике чаще всего `onMounted` + `onUnmounted`. В Composition их можно вызывать только синхронно во время `setup` (не внутри произвольного `setTimeout`)."}}}

Что такое lifecycle hooks в Vue?

Vue · middle · сложность 4

Войти, чтобы отмечать

Коротко

Lifecycle hooks — колбэки на этапах жизни компонента: создание, монтирование в DOM, обновление, размонтирование. В Composition API это функции onMounted, onUpdated, onUnmounted и др.; в Options — mounted, updated, unmounted (в Vue 2 ещё beforeDestroy/destroyed).

Основные этапы (Vue 3)

setup / beforeCreate→created (Options)
onBeforeMount → onMounted — компонент в DOM
onBeforeUpdate → onUpdated — после реактивного патча
onBeforeUnmount → onUnmounted — очистка

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

const id = setInterval(() => {}, 1000)
onMounted(() => {
  console.log('DOM готов')
})
onUnmounted(() => {
  clearInterval(id)
})
</script>

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

Есть ещё onActivated / onDeactivated для <KeepAlive>, onErrorCaptured для ошибок в потомках. SSR: onServerPrefetch.

Итог

Хуки = точки жизненного цикла. На практике чаще всего onMounted + onUnmounted. В Composition их можно вызывать только синхронно во время setup (не внутри произвольного setTimeout).

Загрузка…