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

Покращити цю статтю

Допрацюйте відповідь до «Для чого використовується хук `beforeCreate`?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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

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

---

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

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

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

---

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

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

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

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

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

---

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

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

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

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

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

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

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

---

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

```js
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. Оптимізації під час створення великої кількості дрібних компонентів

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати258 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.