Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які основні етапи життєвого циклу компонента?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Основні етапи життєвого циклу компонента Vue - це **чотири ключові фази**: Створення, Монтування, Оновлення та Розмонтування. **Ключове:** кожна фаза має свої lifecycle hooks, і це класичне питання на співбесідах.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняОсновні етапи життєвого циклу компонента 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 - видалення слухачів сторонніх бібліотекДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.