Жизненный цикл приложения Vue

Жизненный цикл компонента — это последовательность этапов, через которые проходит каждый компонент Vue.js от создания до удаления со страницы. Хорошее понимание жизненного цикла — одна из базовых вещей для эффективной работы с Vue. Если вы знаете, когда и в каком порядке происходят события, становится намного проще управлять логикой и состоянием ваших компонентов.

Общее представление о жизненном цикле

В процессе своей работы приложение проходит через ряд этапов, которые составляют жизненный цикл приложения. Кроме того, фреймворк Vue предоставляет ряд специальных методов, с помощью которых мы можем вызвать некоторые действия на различных этапах жизненного цикла приложения.

Весь жизненный цикл приложения Vue 3 можно описать следующим образом:

1. Вызывается функция Vue.createApp() и метод mount(). Сначала происходит инициализация приложения Vue
2. Сразу после инициализации приложения, но до установки свойств, методов и обработчиков событий объектов приложения вызывается метод beforeCreate ()
3. Далее происходит создание объекта Vue, установка его свойств, обработчиков событий и прочих методов
4. После создания объекта приложения Vue и установки всех свойств и методов вызывается метод created (). На этом этапе еще не произошло прикрепление объекта приложения Vue к элементу html веб-страницы
5. Далее выполняется компиляция шаблона — валидную разметку с кодом html, которая представляет приложение Vue и внутри которой приложение будет работать
6. Вызывается метод beforeMount()
7. Элемент html, который передается в метод mount в Vue.createApp({}).mount(), заменяется скомпилированным шаблоном
8. Сразу после прикрепления приложения Vue к элементу html, вызывается метод mounted (), и после этого шаблон считается прикрепленным к DOM, и мы можем с ним работать
9. Если в процессе работы мы обновляем данные приложения Vue, то происходит еще ряд событий:
   1. Данные изменяются
   2. Вызывается метод beforeUpdate()
   3. Производится повторный рендеринг DOM для его соответствия виртуальному DOM
   4. Вызывается метод updated(). DOM на веб-странице обновлен, и мы продолжаем работать с приложением Vue
10. При откреплении объекта приложения Vue вызывается метод beforeUnmount()
11. После открепления приложения Vue от html-страницы вызывается метод unmounted()

На каждом из этих этапов срабатывают специальные хуки, которые называют жизненные события. Это функции, которые можно определить внутри компонента, чтобы выполнять нужную логику.

Жизненные хуки

Основные жизненные хуки в компонентах Vue:

• beforeCreate вызывается перед инициализацией данных и событий
• created вызывается непосредственно после инициализации данных
• beforeMount перед тем, как компонент будет смонтирован
• mounted сразу после монтирования в DOM (тема нашей статьи)
• beforeUpdate перед тем, как компонент будет обновлён
• updated после обновления DOM из-за реактивных изменений
• beforeUnmount (Vue 3) или beforeDestroy (Vue 2) перед удалением компонента
• unmounted (Vue 3) или destroyed (Vue 2) после удаления элемента и очистки