自定义 Hook 本质是封装响应式逻辑、生命周期或副作用的普通函数，以 use 开头命名，需在 setup 中调用；内部可使用 ref、onMounted 等 API，返回响应式数据与方法，支持参数传入和灵活配置。
Composition API 中的自定义 Hook（官方称为“组合式函数”）本质是封装了响应式逻辑、生命周期调用或副作用的普通函数，它接收参数、返回响应式数据或方法，且必须在 setup() 或其他组合式函数中调用（遵循 Vue 的调用规则）。
命名与导出规范
组合式函数名建议以 use 开头（如 useFetch、useScroll），语义清晰，便于识别；文件通常单独存放（如 src/composables/useCounter.js），默认导出函数：
- 函数内部可直接使用
ref、reactive、computed、watch、onMounted等 API - 避免在函数顶层执行副作用（如直接发请求），应包裹在逻辑流程中（如通过返回的函数触发）
- 导出的对象属性需保持响应性——不要解构返回值再赋给普通变量（会丢失响应性）
基础结构：以 useCounter 为例
一个典型的计数器组合式函数：
import { ref, computed } from 'vue'
<p>export function useCounter(initialValue = 0) {
const count = ref(initialValue)</p><p>const increment = () => count.value++
const decrement = () => count.value--
const reset = () => count.value = initialValue</p><p>const isPositive = computed(() => count.value > 0)</p><p>return {
count,
isPositive,
increment,
decrement,
reset
}
}在组件中使用时直接解构即可，所有属性保持响应式：
import { useCounter } from '@/composables/useCounter'
<p>export default {
setup() {
const { count, increment, reset } = useCounter(10)
return { count, increment, reset }
}
}处理异步与副作用：useFetch 示例
涉及请求、监听、清理的场景需注意生命周期和资源管理：
- 用
ref管理 loading / error / data 状态 - 用
onUnmounted清理未完成的请求（如取消 axios CancelToken 或 AbortController） - 把请求逻辑封装为可手动调用的函数（而非自动触发），增强可控性
简化版示例：
import { ref, onUnmounted } from 'vue'
<p>export function useFetch(url) {
const data = ref(null)
const error = ref(null)
const loading = ref(false)</p><p>const controller = new AbortController()</p><p>const execute = async () => {
loading.value = true
error.value = null
try {
const res = await fetch(url, { signal: controller.signal })
data.value = await res.json()
} catch (e) {
if (e.name !== 'AbortError') error.value = e
} finally {
loading.value = false
}
}</p><p>onUnmounted(() => controller.abort())</p><p>return {
data,
error,
loading,
execute
}
}接收配置与回调：提升灵活性
可通过 options 对象传入配置项，或接收回调函数处理结果：
- 例如
useLocalStorage(key, defaultValue, { autoSync: true }) - 支持传入
onUpdate回调，在值变更时通知外部 - 对参数做类型检查或默认值兜底（尤其当 defaultValue 可能为
null或undefined时）
小技巧：用 toRef 或 toRefs 暴露响应式对象的属性时，确保解构后仍响应；若需返回整个响应式对象，直接返回 reactive 实例更稳妥。
