Vue3中hooks详解

Vue3中hooks详解一、 核心概念1. 什么是 Composable2. 为什么需要它二、 基本结构与规范三、 常见应用场景与示例1. 鼠标位置追踪 (useMouse)2. 网络请求封装 (useFetch)3. 本地存储同步 (useLocalStorage)四、 最佳实践与注意事项五、 总结在 Vue 3 中Hooks钩子函数 通常指的是组合式函数Composables。这是一种基于组合式 APIComposition API的代码复用和组织逻辑的模式。它允许你将组件中的状态和逻辑提取到独立的函数中从而实现逻辑的复用、解耦和更好的可测试性。一、 核心概念1. 什么是 Composable* 它是一个函数利用 Vue 的组合式 API如 ref, reactive, computed, watch, onMounted等来封装和复用有状态逻辑。 * 约定俗成地Composable 函数名以 use 开头例如 useMouse, useFetch以便识别。2. 为什么需要它* 逻辑复用解决 Vue 2 中 Mixins 存在的命名冲突、来源不清晰等问题。 * 代码组织将相关逻辑状态 方法 副作用聚合在一起而不是分散在 data, methods, mounted 等选项中。 * 灵活性可以嵌套使用一个 Composable 可以调用另一个 Composable。二、 基本结构与规范一个标准的 Composable 函数通常包含以下部分// useCounter.jsimport{ref,computed}fromvueexportfunctionuseCounter(initialValue0){// 1. 定义响应式状态constcountref(initialValue)// 2. 定义计算属性或方法constdoublecomputed(()count.value*2)functionincrement(){count.value}functiondecrement(){count.value--}// 3. 返回需要暴露给组件使用的状态和方法return{count,double,increment,decrement}}在组件中使用script setupimport{useCounter}from./useCounter// 调用 hook获取状态和方法const{count,double,increment,decrement}useCounter(10)/scripttemplatedivpCount:{{count}}/ppDouble:{{double}}/pbutton clickincrement/buttonbutton clickdecrement-/button/div/template三、 常见应用场景与示例1. 鼠标位置追踪 (useMouse)监听鼠标移动事件返回当前坐标。// useMouse.jsimport{ref,onMounted,onUnmounted}fromvueexportfunctionuseMouse(){constxref(0)constyref(0)constupdate(event){x.valueevent.pageX y.valueevent.pageY}onMounted(()window.addEventListener(mousemove,update))onUnmounted(()window.removeEventListener(mousemove,update))return{x,y}}2. 网络请求封装 (useFetch)封装通用的异步数据获取逻辑处理加载状态、错误和数据。// useFetch.jsimport{ref,watchEffect}fromvueexportfunctionuseFetch(url){constdataref(null)consterrorref(null)constloadingref(true)constfetchDataasync(){loading.valuetruetry{constresawaitfetch(url)if(!res.ok)thrownewError(Network response was not ok)data.valueawaitres.json()}catch(err){error.valueerr.message}finally{loading.valuefalse}}// 当 url 变化时重新获取数据watchEffect((){fetchData()})return{data,error,loading}}3. 本地存储同步 (useLocalStorage)将响应式数据同步到浏览器的 localStorage。// useLocalStorage.jsimport{ref,watchEffect}fromvueexportfunctionuseLocalStorage(key,defaultValue){conststoredValuelocalStorage.getItem(key)conststateref(storedValue?JSON.parse(storedValue):defaultValue)watchEffect((){localStorage.setItem(key,JSON.stringify(state.value))})returnstate}四、 最佳实践与注意事项命名规范始终以use开头后跟描述性功能名称驼峰命名法。返回值始终返回一个对象包含组件需要访问的状态和方法。即使只返回一个值也建议包裹在对象中保持接口一致性和未来扩展性。避免副作用泄露确保在onUnmounted中清理事件监听器、定时器等防止内存泄漏。参数化通过函数参数接收配置项或初始值提高 Hook 的通用性。不要直接修改传入的 Ref如果 Hook 接收ref作为参数应避免直接替换该ref对象而是修改其.value。如果需要替换应返回新的ref。类型支持TypeScript为 Composable 函数添加明确的类型定义提升开发体验和代码健壮性。// useCounter.tsimport{ref,Ref}fromvueexportfunctionuseCounter(initialValue:number0){constcount:Refnumberref(initialValue)// ...return{count,/* ... */}}与 Pinia/Vuex 的区别Composables侧重于逻辑复用状态通常局限于使用该 Hook 的组件实例除非特意共享。每个组件调用useXxx()通常会获得独立的状态副本。Pinia/Vuex侧重于全局状态管理状态是单例的所有组件共享同一份状态。五、 总结Vue 3 的 Hooks/Composables 是构建大型、可维护应用的关键工具。它们通过函数式的组合方式实现了比 Mixins 更清晰、更灵活、更类型安全的逻辑复用。掌握 Composables 的编写和使用是深入理解 Vue 3 组合式 API 的核心。