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

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

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

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

Контент

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

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

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

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

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

**Composition API** - це **сучасний спосіб написання компонентів у Vue 3**, який дозволяє **гнучко організовувати логіку** за допомогою звичайних функцій та змінних JavaScript, без потреби ділити код за опціями (`data`, `methods`, `computed` тощо).

---

## Основна ідея

Замість того щоб описувати компонент як об'єкт (Options API),
ми описуємо **всю його логіку всередині функції** `setup()` або - частіше - у `<script setup>`.

Composition API вирішує проблему фрагментації коду, коли у великих компонентах логіка одного процесу була "розкидана" по різних розділах (`data`, `computed`, `methods`, `watch`).

---

## Приклад компонента з Composition API

```javascript
<template>
  <div>
    <p>Лічильник: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

const count = ref(0)

function increment() {
  count.value++
}
</script>
```

Тут все просто:

- `ref()` створює реактивну змінну;
- `count.value` - це поточне значення;
- функція `increment()` змінює стан;
- шаблон автоматично оновлюється при зміні `count`.

---

## Основні елементи Composition API

| Концепт | Опис |
|---|---|
| `setup()` / `<script setup>` | Точка входу логіки компонента |
| `ref()` | Створює реактивне значення (для примітивів) |
| `reactive()` | Робить об'єкт реактивним |
| `computed()` | Створює обчислюване значення |
| `watch()` | Реагує на зміну даних |
| `onMounted()`, `onUnmounted()` | Хуки життєвого циклу |
| `defineProps()`, `defineEmits()` | Оголошують вхідні параметри та події |
| `provide()` / `inject()` | Передача залежностей вниз по дереву компонентів |
| `composables` | Функції для повторного використання логіки (аналог hooks у React) |

---

## Порівняння з Options API

| Критерій | **Options API** | **Composition API** |
|---|---|---|
| Організація коду | Розділена за опціями (`data`, `methods`, `computed`) | Групується за логікою та функціями |
| Контекст | Використовується `this` | Використовуються звичайні змінні |
| Повторне використання логіки | Через mixins (менш зручно) | Через composable-функції |
| Підтримка TypeScript | Обмежена | Відмінна - завдяки статичному аналізу |
| Масштабованість | Хороша для дрібних компонентів | Відмінна для складних проєктів |
| Поріг входу | Простіше для новачків | Потребує базового розуміння реактивності та JS |

---

## Приклад: `reactive`, `computed`, `watch`

```javascript
<script setup>
import { reactive, computed, watch } from 'vue'

const state = reactive({ count: 0 })

const doubled = computed(() => state.count * 2)

watch(() => state.count, (newVal) => {
  console.log('Count змінився:', newVal)
})

function increment() {
  state.count++
}
</script>
```

---

## Приклад composable-функції

Composable - це просто JS-функція, яка використовує Composition API для створення логіки, яку можна повторно використовувати.

```javascript
// useCounter.js
import { ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  const reset = () => (count.value = 0)
  return { count, increment, reset }
}
```

```javascript
<script setup>
import { useCounter } from './useCounter'

const { count, increment, reset } = useCounter(10)
</script>
```

---

## Переваги Composition API

**Гнучкість та масштабованість** - зручно групувати код за логічними блоками
**Краще повторне використання логіки** - через composables
**Відмінна підтримка TypeScript**
**Менше "магії"** - використовується чистий JS
**Сумісність з Options API** - можна поєднувати обидва підходи

---

## Підсумок

> **Composition API** - це новий спосіб написання компонентів у Vue 3,
> який дозволяє використовувати звичайні функції та змінні для опису реактивної логіки.
>
> Він робить код більш **гнучким, придатним для повторного використання та масштабованим**, особливо у великих застосунках.

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

Для рев’юера

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

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