Что такое Composition API?

Вопрос

Что такое Composition API и чем он отличается от Options API?

Короткий ответ

Composition API — это набор функций (ref, reactive, computed, watch, хуки жизненного цикла), которые позволяют организовывать логику компонента по фиче, а не по типу опции, и легко переиспользовать её между компонентами через composables.

Подробный ответ

В Options API логика одной фичи (например, работа со счётчиком) размазана по data, computed, methods, watch. В больших компонентах это усложняет чтение.

Composition API (обычно через <script setup>) собирает всю логику фичи в одном месте:

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

const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() { count.value++ }
</script>

Главное преимущество — переиспользование через composables (обычные функции useXxx()), в отличие от миксинов Options API, которые страдали от неявного конфликта имён.

<script setup> — синтаксический сахар: все объявленные переменные и функции автоматически доступны в шаблоне, без return как в обычном setup().

Пример

// composables/useCounter.ts
export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}

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

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

Дополнительные вопросы

• Чем composable отличается от миксина?
• Можно ли использовать Options API и Composition API в одном компоненте?
• Что происходит с this внутри <script setup>?