Які основні етапи життєвого циклу компонента?

Основні етапи життєвого циклу компонента Vue - це чотири ключові фази, через які проходить будь-який компонент:

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

Кожна фаза включає свої lifecycle hooks. Розберемо детально - це класичне питання на співбесідах.

---

#1. Фаза Створення (Creation)

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

Хуки:

#beforeCreate

• Реактивні дані ще не ініціалізовані
• Не можна звертатися до data, props, computed

#created

• Реактивність уже працює
• Доступні data, methods, props, computed, watch
• DOM ще немає

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

• запити до API
• підготовка даних
• налаштування таймерів

---

#2. Фаза Монтування (Mounting)

Компонент створює віртуальний DOM і вставляється в реальний DOM.

Хуки:

#beforeMount

• DOM ще не оновлений Vue
• Початкова розмітка на сторінці

#mounted

• Компонент повністю в DOM
• Можна використовувати refs
• Можна інтегрувати сторонні бібліотеки

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

• ініціалізація графіків
• фокус на input
• робота з canvas
• підключення сторонніх скриптів

---

#3. Фаза Оновлення (Updating)

Запускається щоразу, коли змінюються реактивні дані.

Хуки:

#beforeUpdate

• DOM ще старий
• Дані вже змінилися

#updated

• DOM оновлений
• Можна реагувати на те, що UI змінився

Важливо: не змінюй data всередині updated, інакше нескінченний цикл.

---

#4. Фаза Розмонтування (Unmounting)

Компонент видаляється з DOM.

Хуки:

#beforeUnmount

• Компонент все ще в DOM
• Час очистити ресурси

#unmounted

• Компонента більше немає
• DOM-елементи знищені

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

• очищення таймерів (setInterval, setTimeout)
• відписка від подій (window.addEventListener)
• закриття WebSocket
• видалення слухачів сторонніх бібліотек