Как использовать хуки (onMounted, onUpdated, и т. д.) в Composition API?
Во Vue 3 Composition API жизненные циклы компонента обрабатываются с помощью специальных функций-хуков, которые импортируются из пакета vue. Эти хуки аналогичны lifecycle-методам из Options API (created, mounted, updated, destroyed и т. д.), но используются внутри setup() или <script setup>.
Хуки предоставляют полный контроль над жизненным циклом компонента, при этом логика компонента группируется по назначению, а не по категориям, как в Options API.
Основные хуки жизненного цикла
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onActivated,
onDeactivated,
onErrorCaptured,
onRenderTracked,
onRenderTriggered
} from 'vue';
Каждый хук принимает в качестве аргумента колбэк-функцию, которая будет вызвана в соответствующем жизненном этапе компонента.
onMounted
Вызывается один раз после того, как компонент вставлен в DOM (аналог mounted в Options API).
import { onMounted } from 'vue';
onMounted(() => {
console.log('Компонент смонтирован');
// Здесь можно вызывать API, фокусировать элементы, подписываться на события и т.д.
});
onBeforeMount
Вызывается перед монтированием компонента (до вставки в DOM).
import { onBeforeMount } from 'vue';
onBeforeMount(() => {
console.log('Компонент почти готов к монтированию');
});
onUpdated
Срабатывает после обновления реактивного состояния и обновления DOM.
import { onUpdated } from 'vue';
onUpdated(() => {
console.log('Компонент обновлён');
});
Полезно, если нужно отслеживать изменения DOM, возникшие в результате изменения реактивных данных.
onBeforeUpdate
Вызывается перед обновлением DOM, если реактивные данные изменились.
import { onBeforeUpdate } from 'vue';
onBeforeUpdate(() => {
console.log('Компонент собирается обновиться');
});
onUnmounted
Срабатывает, когда компонент удаляется из DOM (аналог destroyed).
import { onUnmounted } from 'vue';
onUnmounted(() => {
console.log('Компонент удалён');
// Например, отписка от слушателей
});
onBeforeUnmount
Вызывается перед удалением компонента.
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
console.log('Компонент готовится к удалению');
});
onActivated и onDeactivated
Работают только с <keep-alive> — полезны для кэшируемых компонентов.
import { onActivated, onDeactivated } from 'vue';
onActivated(() => {
console.log('Компонент активирован через keep-alive');
});
onDeactivated(() => {
console.log('Компонент деактивирован, но не уничтожен');
});
onErrorCaptured
Используется для перехвата ошибок в дочерних компонентах.
import { onErrorCaptured } from 'vue';
onErrorCaptured((err, instance, info) => {
console.error('Ошибка:', err);
console.log('Инфо:', info);
return false; // предотвращает дальнейшее распространение ошибки
});
onRenderTracked и onRenderTriggered
В основном применяются для отладки — позволяют отслеживать, какие реактивные зависимости используются при рендере.
import { onRenderTracked, onRenderTriggered } from 'vue';
onRenderTracked((e) => {
console.log('Зависимость отслежена:', e);
});
onRenderTriggered((e) => {
console.log('Рендер вызван из-за:', e);
});
Использование хуков внутри setup()
Вариант с обычной функцией:
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
console.log('Компонент смонтирован, значение:', count.value);
});
return { count };
}
}
Использование с <script setup>
Composition API поддерживает <script setup>, где хуки вызываются напрямую без setup().
<script setup>
import { ref, onMounted, onUpdated } from 'vue';
const count = ref(0);
onMounted(() => {
console.log('Component mounted');
});
onUpdated(() => {
console.log('Component updated');
});
</script>
Особенности и ограничения
-
Хуки можно вызывать только внутри setup() (или <script setup>).
-
Вызовы хуков должны быть синхронными — нельзя вызывать их внутри setTimeout, async-функций, колбэков и т.д.
-
В композиционных функциях хуки также работают корректно, если вызываются внутри setup() родительского компонента, который эту функцию использует.
Пример с несколькими хуками
import { ref, onMounted, onBeforeUpdate, onUpdated, onUnmounted } from 'vue';
export default {
setup() {
const message = ref('Привет');
onMounted(() => {
console.log('Mounted');
});
onBeforeUpdate(() => {
console.log('Перед обновлением');
});
onUpdated(() => {
console.log('После обновления');
});
onUnmounted(() => {
console.log('Компонент удалён');
});
return { message };
}
}
Пример с composition function и хуками
// useLogger.js
import { onMounted, onUnmounted } from 'vue';
export function useLogger(name) {
onMounted(() => {
console.log(\`${name} mounted\`);
});
onUnmounted(() => {
console.log(\`${name} unmounted\`);
});
}
// Component.vue
<script setup>
import { ref } from 'vue';
import { useLogger } from './useLogger';
const title = ref('Hello');
useLogger('MyComponent');
</script>