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

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

Допрацюйте відповідь до «Чи можна змішувати Options API і Composition API?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

**Так, змішувати Options API і Composition API можна, і це повністю підтримується Vue 3.**
Такий підхід називають **hybrid approach** - змішаний стиль написання компонента.

Vue 3 спеціально зберігає Options API, щоб:

- забезпечити плавну міграцію з Vue 2,
- дати розробникам можливість поєднувати обидва стилі там, де це зручно.

---

## Як виглядає змішаний компонент

```vue
<script>
import { ref, onMounted } from 'vue'

export default {
  data() {
    return {
      title: 'Options API'
    }
  },

setup() {
    const count = ref(0)

onMounted(() => {
      console.log('mounted (Composition API)')
    })

return { count }
  },

mounted() {
    console.log('mounted (Options API)')
  }
}
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>
```

Працює без проблем.
Значення з setup доступні в шаблоні.
Хуки обох API викликаються.

---

## ВАЖЛИВІ МОМЕНТИ

### 1. setup() виконується раніше, ніж хуки Options API

Порядок виклику:

1. **setup()**
2. beforeCreate
3. created
4. beforeMount
5. mounted

---

### 2. Значення з setup НЕ доступні через `this`

В Options API:

```js
mounted() {
  console.log(this.count)  // undefined
}
```

У шаблоні - доступно
У setup - доступно
У `this` - ні

Тому що Composition API **не використовує this**.

---

### 3. Можна змішувати, але краще робити це усвідомлено

Коли змішувати - добре:

- міграція з Vue 2 на Vue 3
- компонент занадто великий, щоб одразу переписати
- частина логіки простіша на Options API, частина - на Composition API

Коли змішувати - погано:

- новий компонент
- логіка стає заплутаною
- частина логіки в setup, частина - в data/methods → хаос

Команда Vue рекомендує:

> **нові компоненти писати повністю на Composition API**,
> а змішувати - лише за потреби.

---

## Підсумок (ідеально для співбесіди)

> **Так, Vue 3 дозволяє змішувати Options API і Composition API в одному компоненті.**
> `setup()` **викликається першим, значення з setup не доступні через** `this`**, але доступні в шаблоні.**
> **Змішування використовується під час міграції та поступового переходу, але в нових компонентах кращий вибір - Composition API.**

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

Для рев’юера

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

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