What is a composable in Vue, and how does it replace mixins?
Quick Answer
A composable is a plain function (by convention useSomething()) that uses Composition API primitives (ref, computed, watch, lifecycle hooks) and returns reactive state and functions. It's how you extract and reuse stateful logic — replacing mixins, which had implicit sources and name collisions.
A composable is just a function that uses the Composition API — refs, computed, watchers, lifecycle hooks — and returns reactive things for a component to use. So useMousePosition sets up the event listeners in onMounted, cleans them up in onUnmounted, and returns x and y. Any component calls it and gets those. It replaces mixins because with a mixin you couldn't see where a property came from and two mixins could collide on a name, whereas with a composable the source is right there in the call and you can rename what you destructure.
function useMousePosition() { const x = ref(0), y = ref(0); onMounted(() => window.addEventListener('mousemove', update)); onUnmounted(...); return { x, y }; }.- A component calls
const { x, y } = useMousePosition()— the source is explicit, no clashes, and it composes with other composables. - Mixins merged options into the component invisibly; you couldn't tell where a property came from.