Composition API (Композиционный API) — это альтернативный подход к организации логики в компонентах Vue (введён в Vue 3 как основной, доступен в Vue 2 через плагин), который позволяет группировать код по его назначению (feature), а не по опциям компонента (data, methods и т.д.).

[Сравнение с Options API]

[Ключевые функции и понятия]

Основу Composition API составляют функции, которые можно вызывать внутри `setup()` или `< script setup>`.

1. `ref()` и `reactive()` — создание реактивных данных.

`ref()` — для примитивов (числа, строки) и объектов. Доступ через `.value` в JS, в шаблоне — автоматически.
`reactive()` — только для объектов. Не требует `.value`, но не работает с примитивами.

2. `computed()` — создание вычисляемых свойств (аналог `computed` в Options API).

3. `watch()` и `watchEffect()` — реакция на изменения.

`watch()` — следит за конкретными источниками.
`watchEffect()` — автоматически отслеживает все реактивные зависимости внутри callback-функции.

4. `onMounted()`, `onUpdated()` и другие — хуки жизненного цикла. Имеют те же названия, но с приставкой `on`: `onMounted`, `onUpdated`.

5. `< script setup>` — синтаксический сахар для Composition API. Делает код чище, автоматически раскрывая импорты и переменные в шаблон.

[Пример: логика счётчика в двух стилях]

Options API (классический):

< script>
export default {  data() {
    return { count: 0 }
  },  methods: {
    increment() { this.count++ }
  },
  computed: {
    doubleCount() { return this.count * 2 }
  },
  mounted() { console.log('Счётчик загружен') }
}
< /script>

< template>
  < button @click="increment">{{ count }} (удвоено: {{ doubleCount }})< /button>
< /template>

Composition API (с тегом `< script setup>`):

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

// ВСЯ ЛОГИКА СОБРАНА ВМЕСТЕ
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
const increment = () => { count.value++ }

onMounted(() => {  console.log('Счётчик загружен')
})
< /script>

< template>
  < button @click="increment">{{ count }} (удвоено: {{ doubleCount }})< /button>
< /template>

[Composables (Композиции)]

Главная сила Composition API — в возможности создавать переиспользуемые функции логики (composables). Это похоже на миксины, но без их недостатков.

Пример: переиспользуемая композиция `useCounter` (файл `useCounter.js`)

import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubleCount = computed(() => count.value * 2)
  const increment = () => { count.value++ }
  const reset = () => { count.value = initialValue }

  return { count, doubleCount, increment, reset }
}

Использование в компоненте

< script setup>
import { useCounter } from './useCounter'
const { count, doubleCount, increment } = useCounter(5)
< /script>

< template>
  < button @click="increment">{{ count }} (удвоено: {{ doubleCount }})< /button>
< /template>

[Когда использовать Composition API]

- Крупные, сложные компоненты, где логика размазана.
- Повторное использование логики между компонентами.
- Проекты на TypeScript.
- Новые проекты на Vue 3 (рекомендуется как стандарт).

Для небольших, простых компонентов можно использовать Options API — он более лаконичен и понятен новичкам.

Итог. Composition API — более гибкая и мощная система организации кода, которая решает проблемы масштабирования и переиспользования логики, характерные для Options API. Он делает код модульным, лучше типизируемым и более простым для тестирования.

[Ссылки]

1. Vue 3, быстрый старт.