Options: Жизненный цикл

Смотрите также

О совместном использовании хуков жизненного цикла см. Руководство - Хуки жизненного цикла

beforeCreate

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

Тип

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

Подробности
Вызывается сразу после инициализации экземпляра и разрешения параметров.
Затем параметры будут определены как реактивные свойства, и будет задано состояние, такое как data() или computed.
Обратите внимание, что хук setup() API Composition вызывается раньше всех хуков Options API, даже 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, на клиенте в серверно-рендеринговом приложении.
Этот хук не вызывается во время рендеринга на стороне сервера.

beforeUpdate

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

Тип

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

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

updated

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

Тип

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

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

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()
- Наблюдатели
- Хуки для пользовательских директив
- Хуки переходов
Хук получает три аргумента: ошибку, экземпляр компонента, вызвавшего ошибку, и информационную строку, указывающую тип источника ошибки.
Можно изменить состояние компонента в errorCaptured(), чтобы отобразить состояние ошибки для пользователя. Однако важно, чтобы в состоянии ошибки не отображался исходный контент, вызвавший ошибку; иначе компонент будет брошен в бесконечный цикл отрисовки.
Хук может вернуть false, чтобы остановить дальнейшее распространение ошибки. Подробнее о распространении ошибок см. ниже.
Правила распространения ошибок
- По умолчанию все ошибки по-прежнему отправляются на уровень приложения app.config.errorHandler, если оно определено, так что эти ошибки могут быть сообщены аналитическому сервису в одном месте.
- Если в цепочке наследования или родительской цепочке компонента существует несколько хуков errorCaptured, все они будут вызваны при одной и той же ошибке, в порядке снизу вверх. Это похоже на механизм «пузырения» собственных событий DOM.
- Если сам хук errorCaptured выбрасывает ошибку, то и эта ошибка, и исходная захваченная ошибка отправляются в app.config.errorHandler.
- Хук errorCaptured может возвращать false, чтобы предотвратить дальнейшее распространение ошибки. По сути, это означает, что «эта ошибка была обработана и её следует игнорировать». Это предотвратит вызов дополнительных хуков errorCaptured или app.config.errorHandler для этой ошибки.
Предостережения при перехвате ошибок
- В компонентах с асинхронной функцией setup() (с использованием top-level await) Vue всегда будет пытаться отрендерить шаблон компонента, даже если setup() выбросил ошибку. Это, скорее всего, приведёт к новым ошибкам, поскольку во время рендеринга шаблон компонента может попытаться получить доступ к несуществующим свойствам неудачного контекста setup(). При перехвате ошибок в таких компонентах будьте готовы обрабатывать как ошибки из неудачного setup() (они всегда приходят первыми), так и ошибки процесса рендеринга.
- Замена компонента с ошибкой в родительском компоненте, находящемся глубоко внутри <Suspense>, приведёт к несоответствиям гидратации в SSR. Вместо этого попробуйте вынести логику, которая может вызвать ошибку, из setup() дочернего компонента в отдельную функцию и выполнить её в setup() родительского компонента. Таким образом, вы сможете безопасно обработать процесс выполнения с помощью try/catch и выполнить замену при необходимости ещё до рендеринга дочернего компонента.

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) {
      // если при подключении data имеет значение null, это означает,
      // что компонент динамически отображается на клиенте.
      // Вместо этого выполните выборку на стороне клиента.
      this.data = await fetchOnClient(/* ... */)
    }
  }
}

Смотрите также Рендеринг на стороне сервера

Редактировать эту страницу на GitHub

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

beforeCreate ​

created ​

beforeMount ​

mounted ​

beforeUpdate ​

updated ​

beforeUnmount ​

unmounted ​

errorCaptured ​

renderTracked ​

renderTriggered ​

activated ​

deactivated ​

serverPrefetch ​

Options: Жизненный цикл

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

errorCaptured

renderTracked

renderTriggered

activated

deactivated

serverPrefetch