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

VueJunior~1 хв читання

У Composition API (Vue 3) доступні ті самі етапи життєвого циклу, що і в Options API, але хуки викликаються через функції, які імпортуються з vue.

Простіше кажучи:

Усі lifecycle-хуки в Composition API - це функції вигляду onXxx(...), які викликаються всередині setup().

Нижче - повний список, включно з основними, додатковими та нестандартними хуками.

Основні хуки життєвого циклу (Composition API)

Options API	Composition API
beforeCreate	відсутній (аналог - код у `setup`)
created	відсутній (аналог - код у `setup`)
beforeMount	`onBeforeMount`
mounted	`onMounted`
beforeUpdate	`onBeforeUpdate`
updated	`onUpdated`
beforeUnmount	`onBeforeUnmount`
unmounted	`onUnmounted`

1. `onBeforeMount()`

Викликається перед монтуванням компонента.

onBeforeMount(() => {
  console.log("Перед монтуванням");
});

2. `onMounted()`

Компонент потрапив у DOM, можна працювати з DOM, refs, сторонніми бібліотеками.

onMounted(() => {
  console.log("Компонент змонтовано");
});

3. `onBeforeUpdate()`

Викликається до оновлення DOM.

onBeforeUpdate(() => {
  console.log("Перед оновленням");
});

4. `onUpdated()`

DOM вже оновлено.

onUpdated(() => {
  console.log("Компонент оновлено");
});

5. `onBeforeUnmount()`

Компонент от-от буде видалений.

onBeforeUnmount(() => {
  console.log("Перед видаленням");
});

6. `onUnmounted()`

Компонент повністю видалений з DOM.

onUnmounted(() => {
  console.log("Компонент видалено");
});

Додаткові та просунуті хуки

Ці хуки використовуються рідше, але інтерв'юер може про них запитати.

`onActivated()`

Компонент став активним після відновлення з <keep-alive>.

onActivated(() => {
  console.log("Компонент активовано");
});

`onDeactivated()`

Компонент був прихований, але не знищений (теж <keep-alive>).

onDeactivated(() => {
  console.log("Компонент деактивовано");
});

`onErrorCaptured()`

Перехоплення помилок з дочірніх компонентів (аналог errorCaptured).

onErrorCaptured((err, instance, info) => {
  console.log(err);
});

`onRenderTracked()`

Викликається при відстеженні реактивної залежності (debug).

onRenderTracked((event) => {
  console.log("tracked:", event);
});

`onRenderTriggered()`

Викликається, якщо зміна даних спричинила повторний рендер.

onRenderTriggered((event) => {
  console.log("triggered:", event);
});

`onServerPrefetch()`

Використовується лише в SSR для серверних пререндерів.

onServerPrefetch(async () => {
  await fetchData();
});

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

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

Premium

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