> Какие хуки или composables используются для работы с API во Vue 3 (Vue.js)

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

Во Vue 3 для работы с API используют composables - функции, инкапсулирующие логику запросов и состояния. Популярные решения: useFetch из VueUse, useAsyncData в Nuxt 3, кастомные composables с fetch или axios. Они обеспечивают реактивность, управление загрузкой, обработку ошибок и отмену запросов через AbortController. Вместо хуков (React) во Vue применяется Composition API с composables.

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

Composables во Vue 3 - это функции, использующие Composition API для создания переиспользуемой логики. Для работы с API они обычно возвращают реактивные refs или reactive объекты с данными, состоянием загрузки и ошибками. В отличие от React хуков, composables не имеют правил порядка вызова и могут вызываться условно.

Основные подходы:

• Кастомный composable с fetch или axios: полный контроль, но больше кода
• VueUse useFetch: готовая обёртка с кэшированием, отменой запросов, интерцепторами
• Nuxt useAsyncData / useFetch: для SSR, автоматическая дедупликация запросов
• Pinia с actions: для централизованного управления состоянием API

Ключевые аспекты:

• Реактивность данных через ref или reactive
• Управление жизненным циклом (отмена запросов при unmount через onUnmounted или AbortController)
• Обработка ошибок и состояний загрузки
• Кэширование и дедупликация запросов

На практике

В реальных проектах выбор зависит от контекста:

• Для простых запросов - useFetch из VueUse или кастомный composable
• Для SSR-приложений на Nuxt - встроенные useFetch и useAsyncData
• Для сложной логики с кэшированием и оптимистичными обновлениями - Pinia + composables
• Для GraphQL - useQuery из Vue Apollo или useLazyQuery

Важно учитывать отмену запросов при смене роута или размонтировании компонента, чтобы избежать утечек памяти и гонок состояний.

Пример кода

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

function useApi(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(false)
  const controller = new AbortController()

  const fetchData = async () => {
    loading.value = true
    try {
      const response = await fetch(url, { signal: controller.signal })
      data.value = await response.json()
    } catch (err) {
      if (err.name !== 'AbortError') error.value = err.message
    } finally {
      loading.value = false
    }
  }

  onUnmounted(() => controller.abort())

  return { data, error, loading, fetchData }
}

const { data, error, loading, fetchData } = useApi('/api/users')
fetchData()
</script>

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

Начни с определения composables как основного способа работы с API во Vue 3. Упомяни популярные решения: VueUse, Nuxt, кастомные реализации. Подчеркни отличие от React хуков - отсутствие правил порядка вызова. Расскажи про управление жизненным циклом и отмену запросов. Приведи пример простого composable. Если спросят про продвинутые сценарии, упомяни кэширование, дедупликацию и интеграцию с Pinia.

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

• Понимание Composition API и его преимуществ перед Options API
• Умение проектировать переиспользуемые composables
• Знание управления асинхронными операциями и жизненным циклом
• Осведомлённость о готовых решениях (VueUse, Nuxt) и их trade-off
• Способность объяснить разницу между хуками React и composables Vue

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

• Использование Options API с mounted вместо composables для логики API
• Отсутствие отмены запросов при размонтировании компонента
• Неправильная обработка ошибок (только в консоль, без реактивного состояния)
• Создание composable без возврата реактивных refs (возврат простых значений)
• Избыточная сложность: написание велосипеда вместо использования готового useFetch
• Игнорирование гонок состояний при быстрых переходах между страницами