Что такое Vue Composables?

Что такое Vue Composables?

Vue Composables (композиции или композаблы) — это функции, использующие Composition API Vue.js для инкапсуляции и повторного использования логики с состоянием в компонентах. Они представляют собой естественное развитие паттерна миксинов (mixins), но без присущих им недостатков, таких как конфликты имён и неявные зависимости. Композаблы позволяют организовать код по функциональному признаку, делая его более модульным, читаемым и тестируемым.

Ключевые характеристики Composables

• Функции, использующие Composition API: Это обычные JavaScript-функции (часто асинхронные), которые внутри используют реактивные API Vue, такие как ref(), reactive(), computed(), watch() и хуки жизненного цикла (onMounted, onUnmounted).
• Инкапсуляция логики с состоянием: Они позволяют вынести бизнес-логику или логику работы с данными из компонента в отдельную, независимую единицу.
• Возврат реактивных данных и методов: Композабл возвращает объект, содержащий реактивные ссылки (ref), реактивные объекты (reactive), вычисляемые свойства (computed) или функции для управления этим состоянием.
• Переиспользование без наследования: В отличие от миксинов, композаблы не "смешивают" свойства с компонентом. Они явно вызываются в setup() или <script setup>, и их возвращаемые значения присваиваются переменным, что даёт полный контроль над областью видимости.

Базовый пример: Композабл для работы с мышью

Рассмотрим классический пример — отслеживание позиции курсора мыши.

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  // 1. Создаём реактивные ссылки для состояния
  const x = ref(0)
  const y = ref(0)

  // 2. Функция-обработчик для обновления состояния
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }

  // 3. Используем хуки жизненного цикла для подписки и отписки
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 4. Возвращаем реактивное состояние (и, при необходимости, методы)
  return { x, y }
}

Теперь этот композабл можно легко использовать в любом компоненте:

<!-- MouseTracker.vue -->
<template>
  <div>Координаты мыши: {{ x }}, {{ y }}</div>
</template>

<script setup>
// Импортируем и вызываем композабл.
// Состояние становится реактивным именно в этом компоненте.
import { useMouse } from './composables/useMouse'
const { x, y } = useMouse()
</script>

Преимущества использования Composables

• Улучшенная организация кода: Логика, связанная с одной задачей (например, получение данных, управление модальным окном, работа с таймерами), группируется в одном месте, а не размазывается по опциям data, methods, watch.
• Эффективное переиспользование: Один композабл можно импортировать и использовать в десятках компонентов. Изменения в нём автоматически применяются ко всем.
• Гибкость и композиция: Несколько композаблов можно комбинировать в одном компоненте для создания сложного поведения. Это похоже на сборку конструктора из отдельных блоков.
• Чёткие зависимости: Все зависимости (другие композаблы, сторонние библиотеки) явно импортируются в функцию, что делает код более предсказуемым.
• Отличная тестируемость: Поскольку это обычные функции, их можно тестировать в изоляции, передавая mock-данные и проверяя возвращаемое состояние.
• TypeScript-совместимость: Композаблы отлично работают с TypeScript, обеспечивая полноценный вывод типов для возвращаемых значений.

Отличия от Миксинов (Mixins) и Хуков React

• Против миксинов: Миксины имеют проблемы с конфликтами имён (если два миксина объявляют одинаковое свойство) и делают поток данных неявным. В композаблах всё импортируется и присваивается явно, что устраняет эти проблемы.
• Против хуков React: Концепция очень близка к кастомным хукам React, что облегчает переход разработчиков между экосистемами. Главное отличие — использование реактивной системы Vue (ref, reactive) вместо useState и useEffect.

Типичные сценарии применения

• Работа с данными (Data Fetching): Композабл useFetch, инкапсулирующий логику запросов, управление состоянием загрузки и ошибками.
• Управление состоянием (State Management): Создание лёгких, специфичных для функции хранилищ без необходимости подключать Pinia для простых случаев.
• Интеграция со сторонними библиотеками: Создание композабла-обёртки для работы с библиотекой карт, графиков или WebSocket.
• Работа с браузерными API: Как в примере с мышью, или для useLocalStorage, useGeolocation, useDeviceOrientation.
• Утилиты: useDebounce, useThrottle, useInterval.

Заключение

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