Хуки життєвого циклу
У Vue 3 є два набори хуків життєвого циклу:
- Хуки для Composition API
- Хуки для Options API
Хуки життєвого циклу (Composition API)
Використовуються всередині <script setup> або звичайного setup().
Монтаж компонента
| Хук | Коли викликається |
|---|---|
| onBeforeMount | перед тим як компонент буде вставлений у DOM |
| onMounted | після того як компонент вставлений у DOM |
Оновлення компонента
| Хук | Коли викликається |
|---|---|
| onBeforeUpdate | перед оновленням DOM |
| onUpdated | після оновлення DOM |
Розмонтування компонента
| Хук | Коли викликається |
|---|---|
| onBeforeUnmount | перед видаленням компонента |
| onUnmounted | після видалення з DOM |
Обробка помилок
| Хук | Коли викликається |
|---|---|
| onErrorCaptured | коли впіймана помилка в дочірньому компоненті |
Транзишени (анімації)
| Хук | Коли викликається |
|---|---|
| onRenderTracked | відстежує залежності реактивності |
| onRenderTriggered | викликається при тригері реактивного оновлення |
(рідко використовуються, але існують)
Компоненти keep-alive
| Хук | Коли викликається |
|---|---|
| onActivated | коли компонент "активується" (повертається з кешу) |
| onDeactivated | коли компонент "деактивується" (йде в кеш) |
Хуки (Options API)
Якщо використовується старий формат (export default {}).
Монтаж:
- beforeCreate
- created
- beforeMount
- mounted
Оновлення:
- beforeUpdate
- updated
Розмонтування:
- beforeUnmount
- unmounted
Keep-alive:
- activated
- deactivated
Помилки:
- errorCaptured
Підсумок (шпаргалка)
Composition API (основні):
- onBeforeMount
- onMounted
- onBeforeUpdate
- onUpdated
- onBeforeUnmount
- onUnmounted
- onErrorCaptured
- onActivated / onDeactivated
- onRenderTracked / onRenderTriggered
Options API (старий формат):
- beforeCreate / created
- beforeMount / mounted
- beforeUpdate / updated
- beforeUnmount / unmounted
- activated / deactivated
- errorCaptured
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.