Какие хуки жизненного цикла существуют во Vue и для чего они нужны

Что проверяют

Знаете ли вы жизненный цикл Vue 3, а не Vue 2, и понимаете ли, что уместно делать на каждом этапе. Следом обычно спрашивают, где запускать запрос к API, в каком порядке срабатывают хуки родителя и ребёнка и какие из них вызываются при SSR.

Как отвечать

Хуки Options API с аналогами из Composition API:

• beforeCreate и created: в Composition API их заменяет сам setup(). Реактивные данные уже есть, DOM ещё нет;
• beforeMount / onBeforeMount: рендер-функция готова, в DOM ещё ничего не вставлено;
• mounted / onMounted: элемент в DOM, шаблонные ссылки заполнены. Место для библиотек, которым нужен реальный узел, и для замеров;
• beforeUpdate / onBeforeUpdate и updated / onUpdated: до и после перерисовки из-за изменения реактивного состояния;
• beforeUnmount / onBeforeUnmount и unmounted / onUnmounted: очистка таймеров, слушателей, соединений. В Vue 2 они назывались beforeDestroy и destroyed;
• activated и deactivated: для компонентов внутри <KeepAlive>, которые не уничтожаются, а прячутся;
• errorCaptured: перехват ошибок дочерних компонентов;
• serverPrefetch: загрузка данных при серверном рендере.

Порядок монтирования: родитель проходит setup и onBeforeMount, затем полностью монтируются дети, и только потом срабатывает onMounted родителя. При SSR на сервере выполняются setup (вместе с beforeCreate и created) и serverPrefetch, а onMounted не вызывается. Запрос данных можно запускать прямо в setup, если результату не нужен DOM.

Где спотыкаются

Называют beforeDestroy и destroyed как актуальные. Поддержка Vue 2 закончилась в конце 2023 года, и такой ответ выдаёт устаревший опыт.

Меняют состояние в onUpdated. Это запускает новую перерисовку и легко приводит к бесконечному циклу. Для реакции на данные нужен watch, для ожидания DOM после изменения nextTick.

Регистрируют хук после await внутри обычной async setup(). К этому моменту Vue уже не знает, к какому компоненту привязать хук, и выдаёт предупреждение. Хуки регистрируются синхронно, а <script setup> обходит этот случай на уровне компилятора.