Для чого використовується хук `beforeCreate`?

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

beforeCreate - це перший хук життєвого циклу компонента Vue. Він викликається найпершим, ще до ініціалізації реактивності, props, computed і методів.

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

beforeCreate - це момент, коли компонент лише починає створюватися, але в нього ще немає доступу ні до даних, ні до props.

Що відбувається на етапі beforeCreate?

На цьому етапі:

Vue ще не створив реактивні дані (data)
props ще не доступні
methods ще не пов'язані з екземпляром
computed і watch ще не ініціалізовані
доступний лише голий екземпляр компонента

Що можна і не можна робити в beforeCreate?

Чого робити НЕ МОЖНА:

У хуку немає доступу до:

this.dataProperty
this.someMethod()
this.someComputed
this.someProp

Усі вони будуть undefined.

Що можна робити:

1. Налаштування глобальних змінних

Наприклад, прив'язка DI (dependency injection) у великих застосунках.

2. Підключення плагінів, які мають виконатися раніше за все

3. Налагодження (debugging)

Хук корисний для аналізу процесу ініціалізації.

4. Модифікація екземпляра до того, як Vue застосує реактивність

Приклад поведінки

export default {
  data() {
    return { msg: "Hello" };
  },

  beforeCreate() {
    console.log(this.msg);      // undefined
    console.log(this.$data);    // undefined
    console.log(this.$props);   // undefined
  },

  created() {
    console.log(this.msg);      // "Hello"
  }
}

Коли реально можна використовувати `beforeCreate`?

У реальному застосунку він потрібен рідко. Але є кейси:

1. Ініціалізація ранніх залежностей

Наприклад, бібліотек, які мають підключитися до створення реактивності.

2. Внутрішні плагіни та міксини

Плагінам потрібен «ранній вхід».

3. Dependency Injection (особливо у Vue 2)

4. Оптимізації під час створення великої кількості дрібних компонентів

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

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

Premium

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