Що таке життєвий цикл компонента Vue?

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

Життєвий цикл компонента Vue - це послідовність етапів, через які проходить компонент від моменту створення до його знищення. На кожному етапі Vue викликає спеціальні хуки життєвого циклу (lifecycle hooks), які дозволяють виконувати код у потрібний момент.

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

Життєвий цикл - це "історія життя" компонента: створення -> рендер -> оновлення -> видалення.

Ця тема - одна з ключових на співбесідах з Vue.

Основні фази життєвого циклу

Кожен компонент проходить через 4 великі етапи:

Створення (Creation)
Монтування в DOM (Mounting)
Оновлення (Updating)
Розмонтування (Unmounting)

1) Фаза створення компонента

У цей момент ще немає доступу до DOM, але вже доступні:

props
реактивні дані
computed
методи
watchers

Хуки:

`beforeCreate`

Компонент лише почав створюватися. data, props ще не встановлені.

`created`

Реактивність уже є. Можна звертатися до data, methods, props.

Але DOM ще немає!

Використання:

запити до API
ініціалізація даних

2) Фаза монтування в DOM

Компонент вперше додається в DOM.

Хуки:

`beforeMount`

DOM ще не оновлений Vue.

`mounted`

Компонент з'явився в DOM. Можна працювати з елементами через ref, викликати сторонні бібліотеки.

Використовується для:

ініціалізації плагінів
роботи з canvas, charts
маніпуляцій з DOM
фокусу на інпуті

3) Фаза оновлення

Коли змінюються реактивні дані -> компонент ререндериться.

Хуки:

`beforeUpdate`

Старий DOM ще на місці. Можна подивитися старі значення або скасувати якісь дії.

`updated`

DOM оновлено. Найкраще місце для реакції на зміни UI.

Важливо: Не змінюй тут дані -> це може викликати нескінченний цикл!

4) Фаза розмонтування

Коли компонент видаляється з DOM (наприклад, v-if став false).

Хуки:

`beforeUnmount`

Компонент ще живий, але скоро буде видалений. Можна очистити таймери або обробники.

`unmounted`

Компонента більше немає в DOM. Усе, що було прив'язане до DOM, краще звільнити.

Використовується для:

зупинки setInterval
відписки від подій
закриття веб-сокетів
очищення сторонніх бібліотек

Усі хуки Vue 3 (повний список)

Фаза створення:

beforeCreate
created

Монтування:

beforeMount
mounted

Оновлення:

beforeUpdate
updated

Розмонтування:

beforeUnmount
unmounted

Приклад у Composition API

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Компонент змонтований');
    });

    onUpdated(() => {
      console.log('Компонент оновився');
    });

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

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

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

Premium

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