Жизненный цикл приложения на Vue.js 3: хуки и их применение

Vue.js 3 предоставляет набор хуков жизненного цикла, которые позволяют выполнять код на разных этапах "жизни" компонента.

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

setup() - новый хук в Vue 3

Это точка входа для Composition API, выполняется до создания компонента.

`import { ref } from 'vue';

export default { setup() { const count = ref(0);

// Возвращаемые значения будут доступны в шаблоне return { count } } }

onBeforeMount / onMounted

• onBeforeMount: вызывается прямо перед монтированием компонента в DOM
• onMounted: вызывается после монтирования компонента

`import { onBeforeMount, onMounted } from 'vue';

export default { setup() { onBeforeMount(() => { console.log('Компонент будет смонтирован'); });

onMounted(() => { console.log('Компонент смонтирован, DOM доступен'); // Можно работать с DOM-элементами const el = document.getElementById('my-element'); }); } }

onBeforeUpdate / onUpdated

• onBeforeUpdate: вызывается перед обновлением компонента (когда данные изменились, но DOM ещё не обновлён)
• onUpdated: вызывается после обновления компонента и DOM

`import { ref, onBeforeUpdate, onUpdated } from 'vue';

export default { setup() { const count = ref(0);

onBeforeUpdate(() => { console.log('Данные изменились, DOM будет обновлён'); });

onUpdated(() => { console.log('DOM обновлён после изменения данных'); });

return { count }; } }

onBeforeUnmount / onUnmounted

• onBeforeUnmount: вызывается перед размонтированием компонента
• onUnmounted: вызывается после размонтирования компонента

`import { onBeforeUnmount, onUnmounted } from 'vue';

export default { setup() { const timer = setInterval(() => { console.log('Таймер работает'); }, 1000);

onBeforeUnmount(() => { console.log('Компонент будет размонтирован'); });

onUnmounted(() => { console.log('Компонент размонтирован'); clearInterval(timer); // Очистка таймера }); } }

Есть еще несколько хуков, которые могут быть задействованы в работе, но на моей практике используются крайне редко

onErrorCaptured - Перехватывает ошибки из дочерних компонентов onActivated / onDeactivated (для keep-alive) onRenderTracked / onRenderTriggered (для отладки)

Когда какие хуки использовать? Инициализация данных - setup() - в том числе SSR Работа с DOM - onMounted() Интеграция с внешними библиотеками - onMounted(), очистка в onUnmounted(). Так же вероятен сценарий подписки и отписки событий Запросы к API - onMounted() или в setup() (если нужен SSR). Обратите внимание на то, что onMounted работает для CSR, поэтому можно получить ряд ворнингов````