Опции: Жизненный цикл
См. также
Чтобы узнать о совместном использовании хуков жизненного цикла, прочтите Руководство — Хуки жизненного цикла
beforeCreate
Вызывается при инициализации экземпляра.
Тип
tsinterface ComponentOptions { beforeCreate?(this: ComponentPublicInstance): void }
Подробности
Вызывается сразу после инициализации экземпляра и разрешения реквизитов.
Затем входные параметры будут определены как реактивные свойства и будет установлено состояние, такое как
data()
илиcomputed
.Обратите внимание, что хук
setup()
API Composition вызывается раньше всех хуков API Options, дажеbeforeCreate()
.
created
Вызывается после того, как экземпляр завершил обработку всех опций, связанных с состоянием.
Тип
tsinterface ComponentOptions { created?(this: ComponentPublicInstance): void }
Подробности
При вызове этого хука уже настроены: реактивные данные, вычисляемые свойства, методы и наблюдатели. Однако этап монтирования еще не начался, и свойство
$el
пока не будет доступно.
beforeMount
Вызывается непосредственно перед монтированием компонента.
Тип
tsinterface ComponentOptions { beforeMount?(this: ComponentPublicInstance): void }
Подробности
Когда вызывается этот хук, компонент завершил установку своего реактивного состояния, но ни один из узлов DOM еще не был создан. Он собирается впервые выполнить свой эффект рендеринга DOM.
Этот хук не вызывается во время отрисовки на стороне сервера.
mounted
Вызывается после того, как компонент был смонтирован.
Тип
tsinterface ComponentOptions { mounted?(this: ComponentPublicInstance): void }
Подробности
Компонент считается смонтированным после:
Все его синхронные дочерние компоненты были смонтированы (не включая асинхронные компоненты или компоненты внутри деревьев
<Suspense>
).Его собственное DOM-дерево было создано и вставлено в родительский контейнер. Обратите внимание, что DOM-дерево компонента находится в документе только в том случае, если корневой контейнер приложения также находится в документе.
Этот хук обычно используется для выполнения сайд эффектов, требующих доступа к отрисованному DOM дереву компонента, или для ограничения кода, связанного с DOM, на клиенте в server-rendered application.
Этот хук не вызывается во время отрисовки на стороне сервера.
beforeUpdate
Вызывается непосредственно перед тем, как компонент собирается обновить своё DOM-дерево в результате изменения реактивного состояния.
Тип
tsinterface ComponentOptions { beforeUpdate?(this: ComponentPublicInstance): void }
Подробности
Этот хук можно использовать для доступа к состоянию DOM до того, как Vue обновит DOM. Также, изменять состояние компонента внутри этого хука безопасно.
Этот хук не вызывается во время отрисовки на стороне сервера.
updated
Вызывается после того, как компонент обновил своё DOM-дерево в результате изменения реактивного состояния.
Тип
tsinterface ComponentOptions { updated?(this: ComponentPublicInstance): void }
Подробности
Хук updated родительского компонента вызывается после обновления дочерних компонентов.
Этот хук вызывается после любого обновления DOM компонента, которое может быть вызвано различными изменениями состояния. Если вам необходимо получить доступ к обновленному DOM после конкретного изменения состояния, используйте вместо этого nextTick().
Этот хук не вызывается во время отрисовки на стороне сервера.
Предупреждение
Не изменяйте состояние компонента в хуке updated - это может привести к бесконечному циклу обновления!
beforeUnmount
Вызывается непосредственно перед тем, как экземпляр компонента должен быть размонтирован.
Тип
tsinterface ComponentOptions { beforeUnmount?(this: ComponentPublicInstance): void }
Подробности
При вызове этого хука экземпляр компонента остается полностью работоспособным.
Этот хук не вызывается во время отрисовки на стороне сервера.
unmounted
Вызывается после того, как компонент был размонтирован.
Тип
tsinterface ComponentOptions { unmounted?(this: ComponentPublicInstance): void }
Подробности
Компонент считается размонтированным после того, как:
Все его дочерние компоненты были размонтированы.
Все связанные с ним реактивные эффекты (эффект отрисовки и эффекты вычисляемых свойств / наблюдателей, созданные в процессе
setup()
) были остановлены.
Используйте этот хук для очистки созданных вручную сайд эффектов, таких как: таймеры, слушатели DOM событий, соединения с сервером.
Этот хук не вызывается во время отрисовки на стороне сервера.
errorCaptured
Вызывается, если была перехвачена ошибка, распространяющаяся от компонента-потомка.
Тип
tsinterface 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
Вызывается, когда реактивная зависимость была отслежена эффектом отрисовки компонента.
Этот хук предназначен только для разработки и не вызывается при рендеринге на стороне сервера.
Тип
tsinterface ComponentOptions { renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void } type DebuggerEvent = { effect: ReactiveEffect target: object type: TrackOpTypes /* 'get' | 'has' | 'iterate' */ key: any }
См. также Подробнее о реактивности
renderTriggered
Вызывается, когда реактивная зависимость вызывает повторный запуск эффекта рендеринга компонента.
Этот хук предназначен только для разработки и не вызывается при рендеринге на стороне сервера.
Тип
tsinterface 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>
.
Этот хук не вызывается во время отрисовки на стороне сервера.
Тип
tsinterface ComponentOptions { activated?(this: ComponentPublicInstance): void }
См. также Руководство — Жизненный цикл кэшированного экземпляра
deactivated
Вызывается после удаления экземпляра компонента из DOM как части дерева, кэшируемого при помощи <KeepAlive>
.
Этот хук не вызывается во время отрисовки на стороне сервера.
Тип
tsinterface ComponentOptions { deactivated?(this: ComponentPublicInstance): void }
См. также Руководство — Жизненный цикл кэшированного экземпляра
serverPrefetch
Асинхронная функция, которая должна быть разрешена перед отрисовкой экземпляра компонента на сервере.
Тип
tsinterface ComponentOptions { serverPrefetch?(this: ComponentPublicInstance): Promise<any> }
Подробности
Если хук возвращает Promise, то серверный рендерер будет ждать разрешения Promise перед отрисовкой компонента.
Этот хук вызывается только во время отрисовки на стороне сервера и может быть использован получения данных только на стороне сервера.
Этот хук вызывается только во время рендеринга на стороне сервера и может использоваться для выборки данных только на сервере.
Пример
jsexport default { data() { return { data: null } }, async serverPrefetch() { // компонент отображается как часть первоначального запроса // предварительное получение данных на сервере происходит быстрее, чем на клиенте this.data = await fetchOnServer(/* ... */) }, async mounted() { if (!this.data) { // если при монтировании данные равны null, это означает, что компонент // динамически отображается на клиенте. Вместо этого выполните // получение данных на стороне клиента. this.data = await fetchOnClient(/* ... */) } } }
См. также Отрисовка на стороне сервера