Composable — это переиспользуемая функция, которая инкапсулирует логику со состоянием с помощью Composition API. По соглашению она называется useXxx и возвращает реактивное состояние и функции — позволяя делиться логикой между компонентами без mixins или повторений.
{ ref, computed } ;
() {
count = (initial);
double = ( count. * );
() { count.++; }
() { count. = initial; }
{ count, double, increment, reset };
}
<script setup>
import { useCounter } from "@/composables/useCounter";
const { count, double, increment } = useCounter(10); // each call = independent state
</script>
<template>
<button @click="increment">{{ count }} (double: {{ double }})</button>
</template>
Каждый компонент, который вызывает useCounter(), получает своё собственное изолированное count — composables создают свежее состояние при каждом вызове, в отличие от общей переменной на уровне модуля.
import { ref, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0), y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
window.addEventListener("mousemove", update); // set up
onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup!
return { x, y };
}
Composables могут использовать lifecycle hooks, watchers и другие composables — и что важно, они инкапсулируют собственную очистку (onUnmounted), поэтому потребители не должны об этом помнить.
Mixins (Vue 2): merged into the component — unclear where properties came from,
naming collisions between mixins, implicit dependencies
Composables: explicit imports + return values — clear sources, no collisions,
can be composed, fully typed in TypeScript
Composables — это идиоматичный способ извлечения и переиспользования логики со состоянием в Vue 3 — получение данных, обработка форм, отслеживание мыши/прокрутки, debouncing и т. д.
Они чисто решают проблему переиспользования логики (явно, без конфликтов, композируемо, дружественно к TypeScript), где Vue 2 mixins потерпели неудачу.
Они — главная причина, по которой команды принимают Composition API: общая логика становится простой, тестируемой функцией вместо рассеянного или дублированного кода.