> Что такое Composition API во Vue и в чем разница с Options API (Vue.js)

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

Composition API - это набор функций (setup, ref, reactive, computed, watch и другие), позволяющий организовывать логику компонента по функциональному признаку, а не по опциям. В отличие от Options API, где код делится на data, methods, computed, в Composition API логика группируется в хуке setup, что упрощает переиспользование и поддержку сложных компонентов.

Подробное объяснение

Options API - классический подход во Vue 2 и Vue 3, где компонент определяется объектом с секциями data, methods, computed, watch, lifecycle hooks. Логика одного функционального блока (например, работа с формой) размазывается по разным опциям, что усложняет чтение и рефакторинг при росте компонента.

Composition API появился во Vue 3 как альтернатива. Вся логика компонента пишется внутри функции setup, которая выполняется до создания компонента. Основные строительные блоки:

• ref и reactive - для реактивных данных
• computed - для вычисляемых свойств
• watch - для отслеживания изменений
• onMounted, onUnmounted и другие - lifecycle hooks

Ключевые отличия:

1. Организация кода: в Options API логика разделена по типу (данные, методы), в Composition API - по функциональности
2. Переиспользование: Composition API легко выносить в отдельные функции (composables), Options API требует миксинов с проблемами конфликтов имён
3. TypeScript: Composition API лучше интегрируется с TypeScript, так как работает с обычными функциями и переменными
4. Производительность: Composition API позволяет более точно контролировать реактивность и tree-shaking

На практике

Для junior-разработчика важно понимать, что Composition API не отменяет Options API - оба подхода поддерживаются во Vue 3. В простых компонентах (до 50 строк) Options API может быть понятнее. Composition API оправдан в:

• Компонентах с несколькими независимыми функциональными блоками
• Сценариях, где нужна переиспользуемая логика между компонентами
• Проектах на TypeScript
• Крупных компонентах, где сложно отследить связи между data и methods

На собеседовании покажите, что понимаете trade-off: Composition API даёт гибкость, но требует дисциплины в организации кода (без неё может получиться "спагетти").

Пример кода

<template>
  <div>
    <p>Счётчик: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
// Options API
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  }
}
</script>

<script setup>
// Composition API (синтаксис setup)
import { ref } from 'vue'

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

Как отвечать на собеседовании

Начните с определения: "Composition API - это функциональный подход к организации логики компонента через setup". Затем перечислите 2-3 ключевых отличия от Options API. Приведите простой пример, когда Composition API удобнее (например, работа с формой или подписка на события). Упомяните, что оба подхода можно комбинировать в одном проекте. Не углубляйтесь в детали реализации ref/reactive, если не спросят.

Что проверяет интервьюер

• Понимание двух парадигм организации кода во Vue
• Умение выбирать подход под задачу
• Знание базовых функций Composition API (ref, reactive, computed, watch)
• Осознание преимуществ и недостатков каждого подхода
• Отсутствие путаницы между Vue 2 и Vue 3

Типичные ошибки

• Утверждение, что Composition API полностью заменяет Options API (это не так)
• Путаница между ref и reactive: забывают про .value для ref в script
• Попытка использовать this внутри setup (this недоступен)
• Смешивание подходов в одном компоненте без понимания, зачем это нужно
• Игнорирование lifecycle hooks: в Composition API они пишутся как onMounted, а не mounted