Опції: Життєвий цикл
Також до вашої уваги
Щоб дізнатися про спільне використання хуків життєвого циклу, див. Гід - Хуки життєвого циклу
beforeCreate
Викликається під час ініціалізації екземпляра.
Тип
tsinterface ComponentOptions { beforeCreate?(this: ComponentPublicInstance): void }
Подробиці
Викликається негайно, коли екземпляр ініціалізується, після вирішення реквізитів, перед обробкою інших параметрів, таких як
data()
абоcomputed
.Зауважте, що хук
setup()
композиційного API викликається перед будь-якими хуками опційного API, навіть перед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 коду клієнта в застосунках з рендерингом на стороні серверу.
Цей хук не викликається під час рендерингу на стороні сервера.
beforeUpdate
Викликається безпосередньо перед тим, як компонент збирається оновити своє дерево DOM через реактивну зміну стану.
Тип
tsinterface ComponentOptions { beforeUpdate?(this: ComponentPublicInstance): void }
Подробиці
Цей хук можна використовувати для доступу до стану DOM до того, як Vue оновить DOM. Також безпечно змінювати стан компонента всередині цього хука.
Цей хук не викликається під час рендерингу на стороні сервера.
updated
Викликається після того, як компонент оновив своє дерево DOM через реактивну зміну стану.
Тип
tsinterface ComponentOptions { updated?(this: ComponentPublicInstance): void }
Подробиці
Батьківський хук оновлення компонента викликається після того, як будуть оновленні його дочірні компоненти.
Цей хук викликається після будь-якого оновлення DOM компонента, яке може бути викликано різними змінами стану. Якщо вам потрібно отримати доступ до оновленої DOM після певної зміни стану, використовуйте замість цього nextTick().
Цей хук не викликається під час рендерингу на стороні сервера.
УВАГА
Не змінюйте стан компонента в хуку оновлення - це, швидше за все, призведе до нескінченного циклу оновлення!
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()
- Спостерігачі
- Користувацькі хуки директив
- Перехідні хуки
Хук отримує три аргументи: помилку, екземпляр компонента, який викликав помилку, та інформаційний рядок, що визначає тип джерела помилки.
Ви можете змінити стан компонента в
errorCaptured()
, щоб показати стан помилки для користувача. Однак важливо, щоб стан помилки не рендерив вихідний вміст, який спричинив помилку; інакше компонент потрапить у нескінченний цикл рендерингу.Хук може повернути
false
, щоб зупинити подальше поширення помилки. Подробиці про поширення помилки див. нижче.Правила розповсюдження помилок
За промовчанням усі помилки все ще надсилаються до
app.config.errorHandler
на рівні застосунку, якщо він визначений, щоб про ці помилки все одно можна було повідомити аналітичні служби в одному місці.Якщо в ланцюжку успадкування або батьківському ланцюжку компонента існує кілька хуків
errorCaptured
, усі вони будуть викликані при одній помилці в порядку знизу вгору. Це схоже на механізм спливання рідних подій 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) { // якщо data є null під час монтування, це означає що компонент // динамічно рендериться на клієнті. Виконує // замість цього запит на стороні клієнта. this.data = await fetchOnClient(/* ... */) } } }
Також до вашої уваги: Застосунок з рендерингом на стороні серверу