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

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

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

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

Контент

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

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

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

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

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

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

Vue 3 дозволяє використовувати:

- опції (`data`, `methods`, `computed`, `mounted` тощо)
- і одночасно функції Composition API (`setup`, `ref`, `reactive`, `onMounted` тощо)

в одному й тому самому компоненті.

---

## Як це виглядає?

```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 }}</p>
</template>
```

Працює без проблем.

---

## Важливі особливості змішаного підходу

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

Порядок ініціалізації:

1. `setup()`
2. `beforeCreate` (з Options API)
3. `created`
4. `beforeMount`
5. `mounted`

---

### 2. **Змінні з** `setup` **доступні в шаблоні**

Через `return`:

```js
setup() {
  const message = ref('Hello')
  return { message }
}
```

---

### 3. **Всередині Options API не можна звертатися до змінних з setup через this**

Неправильно:

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

Це очікувано - Composition API *не прив'язаний* до `this`.

Але змінна доступна в шаблоні і з setup.

---

### 4. **Можна використовувати watch/computed в обох API**

Обидва варіанти працюють:

```js
computed: {
  fullName() { ... }
}

const computedName = computed(() => ... )
```

---

### 5. **Використовувати змішаний підхід варто помірно**

Хоча це і можливо, команда Vue рекомендує:

- для простих компонентів → Options API
- для складної логіки → Composition API
- не змішувати два API безсистемно

Використовувати змішаний підхід корисно під час **міграції з Vue 2 на Vue 3**.

---

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

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

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

Для рев’юера

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

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