Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які хуки життєвого циклу доступні?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У Vue доступний **повний набір lifecycle-хуків**, але він відрізняється для **Options API** і **Composition API**. В Options API це `beforeCreate`, `created`, `beforeMount`, `mounted`, `beforeUpdate`, `updated`, `beforeUnmount`/`unmounted`, `activated`/`deactivated`. В Composition API - їхні аналоги з префіксом `on` (`onMounted`, `onUpdated` тощо), а також додаткові хуки на кшталт `onErrorCaptured`. **Ключове:** на співбесіді важливо перелічити обидва списки - для Options API і для Composition API.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ Vue доступний **повний набір lifecycle-хуків**, але він відрізняється для **Options API** і **Composition API**. На співбесіді важливо перелічити обидва списки. --- ## Хуки життєвого циклу в Options API (Vue 2/3) Це класичний набір: ### Етап ініціалізації - **beforeCreate** - **created** ### Етап монтування - **beforeMount** - **mounted** ### Етап оновлення - **beforeUpdate** - **updated** ### Етап розмонтування - **beforeUnmount** *(Vue 3)* (у Vue 2 це `beforeDestroy`) - **unmounted** *(Vue 3)* (у Vue 2 це `destroyed`) ### Компоненти всередині `<keep-alive>` - **activated** - **deactivated** --- ## Хуки життєвого циклу в Composition API (Vue 3) Ці хуки імпортуються з Vue і викликаються всередині `setup()` або `<script setup>`: ```js import { onMounted, onUpdated, onUnmounted } from 'vue' ``` ### Ініціалізація - **onBeforeMount** - **onMounted** ### Оновлення - **onBeforeUpdate** - **onUpdated** ### Розмонтування - **onBeforeUnmount** - **onUnmounted** ### Keep-alive хуки - **onActivated** - **onDeactivated** ### Додаткові - **onErrorCaptured** - ловить помилки в дочірніх компонентах - **onRenderTracked** - відлагодження реактивності - **onRenderTriggered** - показує, що спричинило перерахунок - **onServerPrefetch** - для SSR - **onScopeDispose** - очищення всередині composables --- ## Підсумок (ідеально для співбесіди) ### **Options API** ``` beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount (beforeDestroy) unmounted (destroyed) activated deactivated ``` ### **Composition API** ``` onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted onActivated onDeactivated onErrorCaptured onRenderTracked onRenderTriggered onServerPrefetch onScopeDispose ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.