组合式函数 composables
组合式函数（composables）是把响应式逻辑抽成独立函数的约定：函数名以 use 开头（如 useMouse、useFetch），内部用 ref/reactive/watch，返回响应式状态与方法，供任意组件复用——相当于「逻辑层面的组件」。
它与 mixins 的区别：mixins 的状态来源不透明、命名易冲突（多个 mixin 同名属性互相覆盖）；composables 的返回值清晰可见，显式解构使用，数据来源一目了然。组件间的逻辑复用，组合式函数是 Vue 3 的官方答案。
- 命名约定 use 开头，返回 ref/方法的对象
- 相较 mixins：来源清晰、无命名冲突、可按需解构
- 可嵌套：一个 composable 内部可调用其他 composable
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>组合式函数 composables</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <mouse-pos></mouse-pos> <mouse-pos></mouse-pos> </div> <script> const { createApp, ref, onMounted, onUnmounted } = Vue; // 可复用的逻辑：跟踪鼠标位置 function useMouse() { const x = ref(0); const y = ref(0); const onMove = (e) => { x.value = e.clientX; y.value = e.clientY; }; onMounted(() => window.addEventListener('mousemove', onMove)); onUnmounted(() => window.removeEventListener('mousemove', onMove)); return { x, y }; } // 可复用的逻辑：计数器 function useCounter(initial = 0) { const n = ref(initial); const inc = () => n.value++; const reset = () => n.value = initial; return { n, inc, reset }; } const app = createApp({}); app.component('mouse-pos', { setup() { // 两个组件各自独立使用，互不干扰 const { x, y } = useMouse(); const { n, inc, reset } = useCounter(); return { x, y, n, inc, reset }; }, template: ` <p>鼠标：({{ x }}, {{ y }}) <button @click="inc">点 {{ n }} 次</button></p>` }); app.mount('#app'); </script> </body> </html>
本节要点组合式函数 = 逻辑级复用：use 前缀 + 返回响应式状态；替代 mixins，来源清晰无冲突。
