vueuse常用hooks

vueUse 文档

vue 项目常用 hooks

官方文档
非官方中文文档

Element DOM 元素相关

API	描述
useDraggable	使元素可拖拽
useElementSize	元素尺寸大小响应式
useMouseInElement	响应式获取鼠标相对于元素的位置
useResizeObserver	监听元素内容和边框尺寸的变化
useWindowScroll	响应式获取窗口的滚动位置
useWindowSize	响应式获取窗口尺寸

浏览器相关

API	描述
useBrowserLocation	响应式获取 Location
useCssVar	操作 css 变量
useEventListener	事件监听，会在组件注册和销毁时自动注入和销毁
useTitle	响应式 document title
useWebWorker	简单的 Web Workers 注册和通信
useFullscreen	切换全屏

Sensors 传感器相关

API	描述
onClickOutside	监听元素外部的点击事件，对模态框和下拉菜单很有用。
onKeyStroke	监听键盘事件
onLongPress	监听一个元素的长按事件
useElementHover	响应元素的悬停状态
useFocus	响应式跟踪或设置 DOM 元素的焦点状态。从外部设置响应值为 true 和 false，将分别触发 focus 和 blur 事件。
useIdle	跟踪用户是否处于非活动状态。
useMouse	响应式获取鼠标位置
useMagicKeys	响应式按下状态，支持组合键。

请求相关

API	描述
useEventSource	使用 EventSource 或 Server-Sent-Events 实例会对 HTTP 服务开启一个持久化的连接，以 text/event-stream 格式发送事件。
useFetch	响应式 Fetch API，提供中止请求、在请求被触发之前拦截请求、在 url 更改时自动重新获取请求以及使用预定义选项创建您自己的 useFetch

Animation 过渡相关

API	描述
useTransition	值之间的过度（常用于数字动态加载）
useTimeout	在给定时间后更新值。
useIntervalFn	带控件的 setInterval 包装器
useInterval	每隔一段时间响应式增加计数
useTimeoutFn	带控件的 setTimeout 包装器。

其他

API	描述
useStorage	将 LocalStorage 和 SessionStorage 中的数据响应式。
useRefHistory	跟踪对 ref 所做的每一步更改, 并将其存储在数组中, 从而实现撤销和重做功能
useDebounceFn	防抖
useDebounceFn	节流