Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Хуки життєвого циклу». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

У Vue 3 є **два набори хуків життєвого циклу**:

1. Хуки для **Composition API**
2. Хуки для **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**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати295 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.