vue.js自定义hook五大方案：一、ref/reactive状态封装；二、watcheffect异步数据获取；三、onmounted/onunmounted事件监听；四、provide/inject跨层级共享；五、pinia store高阶复用。
如果您在 Vue.js 项目中反复编写相似的状态管理、事件监听或副作用逻辑，则说明您正面临组件间逻辑复用的典型挑战。以下是实现高效、可维护自定义 Hook 的多种具体方案：
一、基于 ref/reactive 的状态封装 Hook
该方法适用于抽取具有独立响应式状态与简单操作的业务逻辑，如计数器、表单字段、开关状态等。通过返回 ref 或 reactive 对象及配套方法，确保调用方获得完整响应性控制权。
1、在 src/composables/useCounter.js 中创建文件，导入 ref 和 computed；
2、定义 useCounter 函数，内部声明 count = ref(0)；
3、定义 increment、decrement 和 reset 方法，均操作 count.value；
4、返回 { count, increment, decrement, reset }；
5、在组件 setup 中执行 const { count, increment } = useCounter() 并在模板中使用 {{ count }}。
二、集成 watch/watchEffect 的异步数据获取 Hook
该方法用于封装依赖外部 URL 的数据请求流程，自动处理加载、错误与响应状态，避免每个组件重复编写 axios/fetch 调用和生命周期绑定逻辑。
1、在 src/composables/useFetch.js 中创建文件，导入 ref、watchEffect 和 axios；
2、声明 data = ref(null)、error = ref(null)、loading = ref(false)；
3、在 watchEffect 内部发起请求，设置 loading.value = true，捕获响应后赋值给 data.value，异常时赋值给 error.value；
4、请求完成后统一设置 loading.value = false；
5、返回 { data, error, loading } 供组件消费。
三、结合 onMounted/onUnmounted 的事件监听 Hook
该方法适用于需绑定全局事件（如 window.resize、click、keydown）并确保自动清理的场景，防止内存泄漏与跨组件事件干扰。
1、在 src/composables/useWindowSize.js 中创建文件，导入 ref、onMounted、onUnmounted；
2、声明 width = ref(window.innerWidth) 与 height = ref(window.innerHeight)；
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
3、定义 updateSize 函数，同步更新两个 ref 值；
4、在 onMounted 中执行 window.addEventListener('resize', updateSize)；
5、在 onUnmounted 中执行 window.removeEventListener('resize', updateSize)；
6、返回 { width, height }。
四、利用 provide/inject 实现跨层级逻辑共享
该方法适用于需在深层嵌套子组件中访问同一份状态与操作，且不希望逐层透传 props 的场景，避免响应性丢失并保持逻辑集中。
1、在 src/composables/useTheme.js 中创建文件，导入 ref、provide、inject；
2、定义 useThemeProvider 函数，内部声明 theme = ref('light') 和 toggleTheme 方法；
3、调用 provide('theme', { theme, toggleTheme })；
4、定义 useThemeConsumer 函数，调用 const themeContext = inject('theme') 并返回其内容；
5、在根组件 setup 中执行 useThemeProvider()，在任意后代组件中执行 const { theme, toggleTheme } = useThemeConsumer()。
五、基于 Pinia store 的高阶逻辑复用方案
该方法适用于需持久化、多组件协同、具备复杂业务规则的状态管理场景，将 Hook 与 store 深度整合，兼顾复用性与可测试性。
1、在 src/stores/useUserAuth.js 中创建 store，使用 defineStore；
2、在 store 中定义 state（如 isAuthenticated）、getters（如 authStatus）、actions（如 login、logout）；
3、创建同名 composable src/composables/useUserAuth.js，内部调用 useUserAuthStore() 并返回 store 实例及其关键属性；
4、在组件中直接调用 const { isAuthenticated, login } = useUserAuth()；
5、确保 store 中所有 action 均使用 async/await 处理异步流程，并在 onError 中触发全局通知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
