Що таке Composition API?

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

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

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

Composition API - це набір функцій (ref, reactive, computed, watch, onMounted та ін.), які дозволяють створювати логіку компонента всередині setup(), як конструктор логіки.

Він створений для кращої структуризації складних компонентів і зручного повторного використання коду.

Чим Composition API відрізняється від Options API?

В Options API код розділений по секціях:

export default {
  data() { ... },
  methods: { ... },
  computed: { ... },
  mounted() { ... }
}

У результаті логіка, що стосується однієї задачі, може бути розкидана по різних блоках.

У Composition API вся пов'язана логіка - поруч одна з одною:

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

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log("Компонент змонтовано")
})
</script>

Головна ідея Composition API

Об'єднати пов'язану логіку у функції, а не розкидати її по різних секціях компонента.

Так простіше:

підтримувати великі компоненти
повторно використовувати логіку
створювати власні хуки (useSomething())
читати і розуміти код

Ключові функції Composition API

Реактивність

ref()
reactive()
computed()
watch()
watchEffect()

Життєвий цикл

onMounted()
onUpdated()
onUnmounted()
onBeforeMount()
onActivated() / onDeactivated()

Структурування коду

setup()
<script setup> (рекомендований синтаксис)

Приклад: лічильник з Composition API

vue

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

const count = ref(0)

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

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

Коли Composition API корисніший за все?

1. Великі компоненти

Легше розбивати логіку на "модулі".

2. Повторно використовувана логіка (композабли)

Можна писати свої хуки:

function useCounter() {
  const count = ref(0)
  const inc = () => count.value++
  return { count, inc }
}

3. Кращий контроль над реактивністю

Можна писати гнучкі watchers, computed, side-effects.

4. Більш читабельні складні компоненти

Немає потреби стрибати між секціями.

5. Дружність до TypeScript

Composition API проєктувався з урахуванням TS.

Що таке `<script setup>`?

У Vue 3.2 додали спрощений синтаксис:

vue

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

const msg = ref('Hello')
</script>

Це:

коротше
швидше
автоматично робить усе, що зазвичай робив setup()

І є рекомендованим способом писати компоненти.

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

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

Premium

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