Хуки жизненного цикла

Хуки жизненного цикла в Options API

Каждый экземпляр компонента проходит через несколько стадий: создание, обновление и удаление. Перед началом каждой стадии вызываются специальные функции — хуки жизненного цикла, которые позволяют выполнять код на определённых этапах.

К примеру, хук created можно задействовать для выполнения кода сразу после создания экземпляра:

Vue.createApp({
  data() {
    return { count: 1 }
  },
  created() {
    console.log('счётчик: ' + this.count)
  }
})

Существуют и другие хуки, такие как mounted, updated и unmounted. Все они вызываются с контекстом this, указывающим на текущий активный экземпляр.

Совет: избегайте стрелочных функций в свойствах экземпляра и колбэках, например:

created: () => console.log(this.a)

Или:

vm.$watch('a', newVal => this.myMethod())

Стрелочные функции не имеют собственного this, поэтому this в них трактуется как переменная, поиск которой выполняется во внешних областях видимости. Это нередко приводит к ошибкам Uncaught TypeError: Cannot read property of undefined или Uncaught TypeError: this.myMethod is not a function.

Диаграмма жизненного цикла

Ниже приведена диаграмма жизненного цикла экземпляра. По мере изучения Vue и накопления практики к ней полезно возвращаться.

Инициализация (создание) компонента

Хуки инициализации выполняются первыми в жизненном цикле компонента. Они позволяют совершать действия до того, как компонент будет добавлен в DOM. В отличие от остальных хуков, они могут срабатывать и при серверном рендеринге.

Внутри этих хуков отсутствует доступ к DOM и целевому элементу монтирования this.$el.

beforeCreate

Выполняется в самом начале инициализации компонента. На этом этапе события ещё не настроены, а данные не стали реактивными.

created

Вызывается синхронно сразу после создания компонента.

На этом этапе уже можно получить доступ к реактивным данным и изменять их, а также использовать методы и вычисляемые свойства. Однако шаблон ещё не встроен в DOM и не отрисован.

Чаще всего created применяется для загрузки данных, например с сервера. При этом асинхронный запрос не заблокирует работу компонента.

Хуки монтирования — вставка в DOM

Срабатывают непосредственно до и после первоначальной отрисовки. Эти хуки не выполняются при серверном рендеринге (SSR). Их используют для получения доступа к DOM компонента и его модификации.

Для получения данных лучше использовать хук created, а не хуки монтирования.

beforeMount

Вызывается непосредственно перед монтированием компонента.

mounted

Вызывается сразу после монтирования компонента — когда вместо el создан vm.$el.

Хук mounted не гарантирует, что все дочерние компоненты уже смонтированы. Если такая гарантия необходима, воспользуйтесь функцией nextTick внутри mounted.

Хуки повторной отрисовки

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

Для отслеживания изменений реактивных свойств больше подходят computed или watch, а не хуки повторной отрисовки.

Они полезны, когда требуется узнать, в какой момент компонент обновляет своё состояние.

beforeUpdate

Аналогичен beforeMount, но срабатывает в момент перерисовки. Позволяет отследить реактивные данные в компоненте до его обновления.

updated

Аналогичен mounted по принципу работы, но вызывается при перерисовке. Срабатывает после того, как DOM обновлён в соответствии с изменившимися данными компонента. Как и в случае с mounted, для отслеживания обновлений дочерних компонентов используйте nextTick.

Хуки удаления компонента

Позволяют выполнять действия в процессе удаления компонента. Они вызываются, когда компонент полностью удаляется из DOM. Их удобно использовать для сбора и отправки аналитики после того, как пользователь закончил работу с компонентом или покинул страницу.

beforeUnmount

Вызывается перед уничтожением компонента. В этот момент компонент ещё полностью работоспособен. Применяется для очистки событий или реактивных подписок, а также для сбора данных, которые будут отправлены на сервер в хуке unmounted.

unmounted

Финальный хук компонента. К этому моменту уничтожено всё, что было связано с компонентом. Используется, когда необходимо отправить на сервер данные об уничтожении компонента.

Хук ошибки errorCaptured

Вызывается при обнаружении ошибок, распространяющихся от дочерних компонентов:

• ошибки при отрисовке компонента;
• ошибки из обработчика ошибок;
• ошибки в других хуках;
• ошибки в функции setup;
• ошибки в наблюдателях (watchers);
• ошибки в хуках пользовательских директив;
• ошибки в хуках переходов (transitions).

  errorCaptured(err, vm, info) {
    // err: объект ошибки
    // vm: компонент, где произошла ошибка
    // info: дополнительная информация
    // return false для остановки дальнейшего проброса ошибки
  }

Хуки, добавленные во Vue 3

В третьей версии фреймворка появились дополнительные хуки.

renderTracked

Вызывается при изменении данных и обновлении представления.

renderTriggered

Вызывается при установке данных.

Хуки renderTracked и renderTriggered работают исключительно в режиме разработки. С их помощью можно точно определить, когда и по какой причине происходит повторная отрисовка компонента.

Хуки жизненного цикла и Composition API

Composition API также предоставляет доступ к хукам жизненного цикла, но в ином формате. В частности, хуки created и beforeCreate недоступны — соответствующий код размещается непосредственно в функции setup() или блоке <script setup>.

Остальные хуки отличаются только названием и синтаксисом:

• beforeMount -> onBeforeMount;
• mounted -> onMounted;
• beforeUpdate -> onBeforeUpdate;
• updated -> onUpdated;
• beforeUnmount -> onBeforeUnmount;
• unmounted -> onUnmounted;
• errorCaptured -> onErrorCaptured;
• renderTracked -> onRenderTracked;
• renderTriggered -> onRenderTriggered.

Пример использования:

/* Options API */
mounted() {
  /* Код */
}

/* Composition API */
onMounted(() => {
  /* Код */
})

Обратите внимание, что в Composition API хуки необходимо импортировать.

import { onMounted } from 'vue'

onMounted(() => {
  /* Код */
})

Хук mounted приведён лишь в качестве примера — описанный выше подход применим и ко всем остальным хукам.