Что такое composables во Vue?

Ключевая идея

Composable — функция, которая инкапсулирует переиспользуемую реактивную логику на Composition API. По соглашению имя начинается с use: useMouse, useFetch, useAuth.

Пример

// useCounter.js
import { computed, ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)
  const double = computed(() => count.value * 2)
  function inc() {
    count.value++
  }
  return { count, double, inc }
}

<script setup>
import { useCounter } from './useCounter'
const { count, inc } = useCounter(10)
</script>

Внутри composable можно вызывать watch, onMounted, другие composables — пока вызов идёт синхронно в setup / <script setup>. Каждый вызов обычно создаёт своё состояние (если вы намеренно не вынесли синглтон наружу).

Чем лучше mixins

Явные импорты и возврат значений — видно происхождение полей; нет слияния опций и скрытых конфликтов имён. TypeScript дружит с composables естественнее.

Не превращайте composable в «бог-объект»: один хук — одна ответственность. Для глобального shared state чаще Pinia, а не модульный синглтон с сюрпризами при SSR.

Итог

Composable = useX() с реактивным API для переиспользования логики. Это главный паттерн организации кода в Vue 3 рядом с компонентами.