Опции: Жизненный цикл

См. также

Чтобы узнать о совместном использовании хуков жизненного цикла, прочтите Руководство — Хуки жизненного цикла

beforeCreate

Вызывается при инициализации экземпляра.

Тип

interface ComponentOptions {
  beforeCreate?(this: ComponentPublicInstance): void
}

Подробности
Вызывается сразу после инициализации экземпляра и разрешения реквизитов.
Затем входные параметры будут определены как реактивные свойства и будет установлено состояние, такое как data() или computed.
Обратите внимание, что хук setup() API Composition вызывается раньше всех хуков API Options, даже beforeCreate().

created

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

Тип

interface ComponentOptions {
  created?(this: ComponentPublicInstance): void
}

Подробности
При вызове этого хука уже настроены: реактивные данные, вычисляемые свойства, методы и наблюдатели. Однако этап монтирования еще не начался, и свойство $el пока не будет доступно.

beforeMount

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

Тип

interface ComponentOptions {
  beforeMount?(this: ComponentPublicInstance): void
}

Подробности
Когда вызывается этот хук, компонент завершил установку своего реактивного состояния, но ни один из узлов DOM еще не был создан. Он собирается впервые выполнить свой эффект рендеринга DOM.
Этот хук не вызывается во время отрисовки на стороне сервера.

mounted

Вызывается после того, как компонент был смонтирован.

Тип

interface ComponentOptions {
  mounted?(this: ComponentPublicInstance): void
}

Подробности
Компонент считается смонтированным после:
- Все его синхронные дочерние компоненты были смонтированы (не включая асинхронные компоненты или компоненты внутри деревьев <Suspense>).
- Его собственное DOM-дерево было создано и вставлено в родительский контейнер. Обратите внимание, что DOM-дерево компонента находится в документе только в том случае, если корневой контейнер приложения также находится в документе.
Этот хук обычно используется для выполнения сайд эффектов, требующих доступа к отрисованному DOM дереву компонента, или для ограничения кода, связанного с DOM, на клиенте в server-rendered application.
Этот хук не вызывается во время отрисовки на стороне сервера.

beforeUpdate

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

Тип

interface ComponentOptions {
  beforeUpdate?(this: ComponentPublicInstance): void
}

Подробности
Этот хук можно использовать для доступа к состоянию DOM до того, как Vue обновит DOM. Также, изменять состояние компонента внутри этого хука безопасно.
Этот хук не вызывается во время отрисовки на стороне сервера.

updated

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

Тип

interface ComponentOptions {
  updated?(this: ComponentPublicInstance): void
}

Подробности
Хук updated родительского компонента вызывается после обновления дочерних компонентов.
Этот хук вызывается после любого обновления DOM компонента, которое может быть вызвано различными изменениями состояния. Если вам необходимо получить доступ к обновленному DOM после конкретного изменения состояния, используйте вместо этого nextTick().
Этот хук не вызывается во время отрисовки на стороне сервера.
Предупреждение
Не изменяйте состояние компонента в хуке updated - это может привести к бесконечному циклу обновления!

beforeUnmount

Вызывается непосредственно перед тем, как экземпляр компонента должен быть размонтирован.

Тип

interface ComponentOptions {
  beforeUnmount?(this: ComponentPublicInstance): void
}

Подробности
При вызове этого хука экземпляр компонента остается полностью работоспособным.
Этот хук не вызывается во время отрисовки на стороне сервера.

unmounted

Вызывается после того, как компонент был размонтирован.

Тип

interface ComponentOptions {
  unmounted?(this: ComponentPublicInstance): void
}

Подробности
Компонент считается размонтированным после того, как:
- Все его дочерние компоненты были размонтированы.
- Все связанные с ним реактивные эффекты (эффект отрисовки и эффекты вычисляемых свойств / наблюдателей, созданные в процессе setup()) были остановлены.
Используйте этот хук для очистки созданных вручную сайд эффектов, таких как: таймеры, слушатели DOM событий, соединения с сервером.
Этот хук не вызывается во время отрисовки на стороне сервера.

errorCaptured

Вызывается, если была перехвачена ошибка, распространяющаяся от компонента-потомка.

Тип

interface ComponentOptions {
  errorCaptured?(
    this: ComponentPublicInstance,
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string
  ): boolean | void
}

Подробности
Ошибки могут быть получены из следующих источников:
- Отрисовка компонента
- Слушатели событий
- Хуки жизненного цикла
- функция setup()
- Наблюдатели
- Хуки пользовательских директив
- Хуки transition
Хук получает три аргумента: ошибку, экземпляр компонента, вызвавшего ошибку, и информационную строку, указывающую тип источника ошибки.
Совет
В продакшене 3-й аргумент (info) будет представлять собой сокращённый код вместо полной информационной строки. Сопоставление кода и строки можно найти в разделе Руководстве по кодам ошибок.
Для отображения состояния ошибки пользователю можно модифицировать состояние компонента в errorCaptured(). Однако важно, чтобы в состоянии ошибки не отображалось исходное содержимое, вызвавшее ошибку, иначе компонент будет брошен в бесконечный цикл отрисовки.
Хук может возвращать false, чтобы остановить дальнейшее распространение ошибки. Подробнее о распространении ошибок см. ниже.
Правила распространения ошибок
- По умолчанию все ошибки по-прежнему отправляются на уровень приложения app.config.errorHandler, если он определен, так что эти ошибки по-прежнему могут быть сообщены аналитическому сервису в одном месте.
- Если в цепочке наследования или родительской цепочке компонента существует несколько хуков errorCaptured, то все они будут вызваны при одной и той же ошибке в порядке снизу вверх. Это похоже на механизм "всплытия" (от англ. bubbling) нативных событий DOM.
- Если сам хук errorCaptured выбрасывает ошибку и эта ошибка, и исходная захваченная отправляются в app.config.errorHandler.
- Хук errorCaptured может возвращать значение false, чтобы предотвратить дальнейшее распространение ошибки. По сути, это означает, что "эта ошибка была обработана и должна быть проигнорирована". Это предотвратит вызов дополнительных хуков errorCaptured или app.config.errorHandler для этой ошибки.

renderTracked

Вызывается, когда реактивная зависимость была отслежена эффектом отрисовки компонента.

Этот хук предназначен только для разработки и не вызывается при рендеринге на стороне сервера.

Тип

interface ComponentOptions {
  renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void
}

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
}

См. также Подробнее о реактивности

renderTriggered

Вызывается, когда реактивная зависимость вызывает повторный запуск эффекта рендеринга компонента.

Этот хук предназначен только для разработки и не вызывается при рендеринге на стороне сервера.

Тип

interface ComponentOptions {
  renderTriggered?(this: ComponentPublicInstance, e: DebuggerEvent): void
}

type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
}

См. также Подробнее о реактивности

activated

Вызывается после вставки экземпляра компонента в DOM как части дерева, кэшируемого при помощи <KeepAlive>.

Этот хук не вызывается во время отрисовки на стороне сервера.

Тип

interface ComponentOptions {
  activated?(this: ComponentPublicInstance): void
}

См. также Руководство — Жизненный цикл кэшированного экземпляра

deactivated

Вызывается после удаления экземпляра компонента из DOM как части дерева, кэшируемого при помощи <KeepAlive>.

Этот хук не вызывается во время отрисовки на стороне сервера.

Тип

interface ComponentOptions {
  deactivated?(this: ComponentPublicInstance): void
}

См. также Руководство — Жизненный цикл кэшированного экземпляра

serverPrefetch

Асинхронная функция, которая должна быть разрешена перед отрисовкой экземпляра компонента на сервере.

Тип

interface ComponentOptions {
  serverPrefetch?(this: ComponentPublicInstance): Promise<any>
}

Подробности
Если хук возвращает Promise, то серверный рендерер будет ждать разрешения Promise перед отрисовкой компонента.
Этот хук вызывается только во время отрисовки на стороне сервера и может быть использован получения данных только на стороне сервера.
Этот хук вызывается только во время рендеринга на стороне сервера и может использоваться для выборки данных только на сервере.

Пример

export default {
  data() {
    return {
      data: null
    }
  },
  async serverPrefetch() {
    // компонент отображается как часть первоначального запроса
    // предварительное получение данных на сервере происходит быстрее, чем на клиенте
    this.data = await fetchOnServer(/* ... */)
  },
  async mounted() {
    if (!this.data) {
      // если при монтировании данные равны null, это означает, что компонент
      // динамически отображается на клиенте. Вместо этого выполните
      // получение данных на стороне клиента.
      this.data = await fetchOnClient(/* ... */)
    }
  }
}

См. также Отрисовка на стороне сервера

Исправить эту страницу на GitHub

Опции: Жизненный цикл ​

beforeCreate ​

created ​

beforeMount ​

mounted ​

beforeUpdate ​

updated ​

beforeUnmount ​

unmounted ​

errorCaptured ​

renderTracked ​

renderTriggered ​

activated ​

deactivated ​

serverPrefetch ​

Опции: Жизненный цикл

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

errorCaptured

renderTracked

renderTriggered

activated

deactivated

serverPrefetch