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——composable 在每次调用时创建新的状态，不像共享的模块级变量。
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 };
}
Composable 可以使用生命周期钩子、watchers 和其他 composable——最重要的是，它们自己封装了清理逻辑（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
Composable 是 Vue 3 中提取和复用有状态逻辑的惯用方式——数据获取、表单处理、鼠标/滚动跟踪、防抖等。
它们干净地解决了逻辑复用的问题（显式、无冲突、可组合、TypeScript 友好），这是 Vue 2 的 mixins 所失败的地方。
它们是团队采用 Composition API 的主要原因：共享逻辑变成了一个简单的、可测试的函数，而不是分散的或重复的代码。