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

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

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

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

Контент

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

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

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

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

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

У **Composition API** (Vue 3) доступні **ті самі етапи життєвого циклу**, що і в Options API, але хуки викликаються через функції, які імпортуються з `vue`.

Простіше кажучи:

> **Усі lifecycle-хуки в Composition API - це функції вигляду** `onXxx(...)`**, які викликаються всередині** `setup()`**.**

Нижче - повний список, включно з основними, додатковими та нестандартними хуками.

---

## **Основні хуки життєвого циклу (Composition API)**

| Options API | Composition API |
|---|---|
| beforeCreate | відсутній (аналог - код у `setup`) |
| created | відсутній (аналог - код у `setup`) |
| beforeMount | `onBeforeMount` |
| mounted | `onMounted` |
| beforeUpdate | `onBeforeUpdate` |
| updated | `onUpdated` |
| beforeUnmount | `onBeforeUnmount` |
| unmounted | `onUnmounted` |

---

### **1.** `onBeforeMount()`

Викликається **перед монтуванням компонента**.

```js
onBeforeMount(() => {
  console.log("Перед монтуванням");
});
```

---

### **2.** `onMounted()`

Компонент **потрапив у DOM**, можна працювати з DOM, `refs`, сторонніми бібліотеками.

```js
onMounted(() => {
  console.log("Компонент змонтовано");
});
```

---

### **3.** `onBeforeUpdate()`

Викликається **до оновлення DOM**.

```js
onBeforeUpdate(() => {
  console.log("Перед оновленням");
});
```

---

### **4.** `onUpdated()`

DOM вже оновлено.

```js
onUpdated(() => {
  console.log("Компонент оновлено");
});
```

---

### **5.** `onBeforeUnmount()`

Компонент **от-от буде видалений**.

```js
onBeforeUnmount(() => {
  console.log("Перед видаленням");
});
```

---

### **6.** `onUnmounted()`

Компонент повністю видалений з DOM.

```js
onUnmounted(() => {
  console.log("Компонент видалено");
});
```

---

## **Додаткові та просунуті хуки**

Ці хуки використовуються рідше, але інтерв'юер може про них запитати.

---

### `onActivated()`

Компонент став активним після відновлення з `<keep-alive>`.

```js
onActivated(() => {
  console.log("Компонент активовано");
});
```

---

### `onDeactivated()`

Компонент був прихований, але не знищений (теж `<keep-alive>`).

```js
onDeactivated(() => {
  console.log("Компонент деактивовано");
});
```

---

### `onErrorCaptured()`

Перехоплення помилок з дочірніх компонентів (аналог `errorCaptured`).

```js
onErrorCaptured((err, instance, info) => {
  console.log(err);
});
```

---

### `onRenderTracked()`

Викликається при відстеженні реактивної залежності (debug).

```js
onRenderTracked((event) => {
  console.log("tracked:", event);
});
```

---

### `onRenderTriggered()`

Викликається, якщо зміна даних спричинила повторний рендер.

```js
onRenderTriggered((event) => {
  console.log("triggered:", event);
});
```

---

### `onServerPrefetch()`

Використовується лише в SSR для серверних пререндерів.

```js
onServerPrefetch(async () => {
  await fetchData();
});
```

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

Для рев’юера

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

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