Що таке Composition API?

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

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>

<script setup>
import { ref } from 'vue'

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, який дозволяє використовувати звичайні функції та змінні для опису реактивної логіки.

Він робить код більш гнучким, придатним для повторного використання та масштабованим, особливо у великих застосунках.

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

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

Premium

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