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

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

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

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

Контент

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

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

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

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

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

**Життєвий цикл компонента Vue** - це послідовність етапів, через які проходить компонент від моменту створення до його знищення.
На кожному етапі Vue викликає спеціальні **хуки життєвого циклу** (lifecycle hooks), які дозволяють виконувати код у потрібний момент.

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

> **Життєвий цикл - це "історія життя" компонента: створення -> рендер -> оновлення -> видалення.**

Ця тема - одна з ключових на співбесідах з Vue.

---

## Основні фази життєвого циклу

Кожен компонент проходить через **4 великі етапи**:

1. **Створення (Creation)**
2. **Монтування в DOM (Mounting)**
3. **Оновлення (Updating)**
4. **Розмонтування (Unmounting)**

---

## 1) Фаза створення компонента

У цей момент *ще немає* доступу до DOM, але вже доступні:

- props
- реактивні дані
- computed
- методи
- watchers

Хуки:

#### `beforeCreate`

Компонент лише почав створюватися.
`data`, `props` ще не встановлені.

#### `created`

Реактивність уже є.
Можна звертатися до `data`, `methods`, `props`.

**Але DOM ще немає!**

Використання:

- запити до API
- ініціалізація даних

---

## 2) Фаза монтування в DOM

Компонент вперше додається в DOM.

Хуки:

#### `beforeMount`

DOM ще *не оновлений* Vue.

#### `mounted`

Компонент з'явився в DOM.
Можна працювати з елементами через `ref`, викликати сторонні бібліотеки.

Використовується для:

- ініціалізації плагінів
- роботи з canvas, charts
- маніпуляцій з DOM
- фокусу на інпуті

---

## 3) Фаза оновлення

Коли змінюються реактивні дані -> компонент ререндериться.

Хуки:

#### `beforeUpdate`

Старий DOM ще на місці.
Можна подивитися старі значення або скасувати якісь дії.

#### `updated`

DOM оновлено.
Найкраще місце для реакції на зміни UI.

Важливо:
Не змінюй тут дані -> це може викликати нескінченний цикл!

---

## 4) Фаза розмонтування

Коли компонент видаляється з DOM (наприклад, `v-if` став false).

Хуки:

#### `beforeUnmount`

Компонент ще живий, але скоро буде видалений.
Можна очистити таймери або обробники.

#### `unmounted`

Компонента більше немає в DOM.
Усе, що було прив'язане до DOM, краще звільнити.

Використовується для:

- зупинки setInterval
- відписки від подій
- закриття веб-сокетів
- очищення сторонніх бібліотек

---

## Усі хуки Vue 3 (повний список)

#### Фаза створення:

- `beforeCreate`
- `created`

#### Монтування:

- `beforeMount`
- `mounted`

#### Оновлення:

- `beforeUpdate`
- `updated`

#### Розмонтування:

- `beforeUnmount`
- `unmounted`

---

## Приклад у Composition API

```js
import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Компонент змонтований');
    });

onUpdated(() => {
      console.log('Компонент оновився');
    });

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

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

Для рев’юера

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

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