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 | 节流 |