Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Коли викликається destroyed?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Залежно від версії Vue хук називається по-різному: у **Vue 2** це `beforeDestroy` і `destroyed`, у **Vue 3** - `beforeUnmount` і `unmounted` (`destroyed` у Vue 3 більше не існує). Хук `destroyed` викликається після остаточного видалення компонента з DOM і очищення всіх його ресурсів. **Ключове:** `destroyed` (Vue 2) / `unmounted` (Vue 3) не викликається при `v-show`, оскільки компонент залишається в DOM, лише приховується.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЗалежно від версії Vue хук називається по-різному: - **Vue 2:** `beforeDestroy` і `destroyed` - **Vue 3:** `beforeUnmount` і `unmounted` (`destroyed` у Vue 3 *більше не існує*) Тож відповім для **Vue 2**, як у питанні, і дам еквівалент для Vue 3 - це важливо на співбесіді. --- ## Коли викликається `destroyed` (Vue 2)? Хук `destroyed` **викликається тоді, коли компонент повністю знищено**: - видалено з DOM - видалено його реактивність - розірвано дерево компонентів - видалено спостерігачів (watchers) - компонента більше НЕ існує Простіше кажучи: > `destroyed` **викликається після остаточного видалення компонента з DOM і очищення всіх його ресурсів.** --- ## Типовий життєвий цикл Vue 2 при знищенні ``` beforeDestroy → компонент ще живий, можна очистити слухачі destroyed → компонент повністю видалений ``` --- ## Приклад (Vue 2): ```js export default { destroyed() { console.log("Компонент видалено з DOM"); } } ``` Спрацьовує, наприклад, коли `v-if` став `false`: ```html <MyComponent v-if="show" /> ``` ```js show = false; // → destroyed викликається ``` --- ## Що можна робити в `destroyed`? - чистити таймери (`clearInterval`, `clearTimeout`) - відписуватися від подій (`removeEventListener`) - закривати з'єднання (WebSocket) - зупиняти сторонні бібліотеки - скасовувати підписки на зовнішні API **Це фінальна точка життя компонента.** --- ## Важливо: destroyed НЕ викликається при v-show ```html <MyComponent v-show="visible" /> ``` Якщо `visible` змінився - компонент залишається в DOM, лише приховується. `destroyed` НЕ буде викликано. --- ## Аналог у Vue 3 У Vue 3 хуки перейменовано: - `beforeDestroy` → `beforeUnmount` - `destroyed` → `unmounted` Приклад: ```js import { onUnmounted } from "vue"; onUnmounted(() => { console.log("Компонент видалено у Vue 3"); }); ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.