组合式 API 逻辑复用的核心是 use 开头的组合函数，它通过函数调用封装响应式状态、计算属性、副作用和方法，每个调用拥有独立状态；函数应单一职责、支持配置参数、导出为 export function，并在 setup 中直接解构使用，副作用需正确清理。
Vue 组合式 API 中的逻辑复用，核心是把可共享的响应式状态、计算属性、副作用和方法，封装成独立的函数——也就是 组合函数（Composables）。它不是靠继承或混入，而是通过 JavaScript 函数调用自然复用，每个调用都拥有独立的状态，互不干扰。
用 use 开头命名组合函数
这是 Vue 官方约定和社区共识。以 use 为前缀，一眼就能识别出这是可复用的逻辑单元，比如 useCounter、useDebounceInput、useApi。这类函数内部使用 ref、reactive、computed、watch 等 API 构建响应式能力，并返回一个包含状态与操作的对象。
- 函数名清晰表达用途，避免泛泛叫
useUtils这类模糊名称 - 每个组合函数应专注单一职责，比如防抖只管输入延迟，不掺杂请求逻辑
- 导出时用
export function useXxx()，便于按需导入和 Tree-shaking
让组合函数支持参数与配置
真正可复用的逻辑不能写死。多数组合函数会接收初始值、选项或回调，增强适应性。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 例如
useCounter(initial = 0)允许不同组件传入不同起始值 -
useDebounceInput(fn, delay = 300)接收要执行的函数和延迟毫秒数 - 复杂场景可接受配置对象：
usePagination({ pageSize: 10, apiFn: fetchList })
在 setup 中直接调用并解构使用
不需要额外注册或注入，就像调用普通函数一样简单。多个实例互不影响，因为每次调用都会创建新的响应式引用和监听器。
立即学习“前端免费学习笔记（深入）”；
- 在组件
setup()中导入并调用：const { count, increment } = useCounter() - 可多次调用同一函数，生成多套独立状态：
const cart1 = useCart(); const cart2 = useCart() - 返回值可直接展开到组件作用域：
return { ...useCounter(), ...useAuth() }
注意副作用与生命周期的归属
组合函数内可以安全使用 onMounted、watch 等，它们会自动绑定到当前组件的生命周期。但需留意：如果组合函数被用于非组件上下文（如纯工具函数），这些钩子会失效或报错。
- 所有副作用（如定时器、事件监听、API 请求）应在组合函数内部清理，通常配合
onUnmounted或watch的停止函数 - 避免在组合函数里访问
this或依赖组件实例，保持纯粹函数特性 - 若需访问 props，可通过参数传入，而不是在函数内部尝试读取 setup 的 props 参数
