Skip to main content

Які хуки життєвого циклу доступні?

VueJunior~1 хв читання
Запропонувати правку

У 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

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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