vueuse-functions

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

VueUse Functions

VueUse 函数

This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.

本指南是针对Vue.js / Nuxt项目中VueUse组合式函数的决策与实现参考。它将需求映射到最合适的VueUse函数，应用正确的使用模式，优先选择基于组合式函数的解决方案而非自定义代码，以保持实现简洁、可维护且高性能。

When to Apply

应用场景

Apply this skill whenever assisting user development work in Vue.js / Nuxt.
Always check first whether a VueUse function can implement the requirement.
Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
Map requirements to the most appropriate VueUse function and follow the function’s invocation rule.
Please refer to the
```
Invocation
```
field in the below functions table. For example:
- ```
AUTO
```
  : Use automatically when applicable.
- ```
EXTERNAL
```
  : Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.
- ```
EXPLICIT_ONLY
```
  : Use only when explicitly requested by the user.
NOTE User instructions in the prompt or
```
AGENTS.md
```
may override a function’s default
```
Invocation
```
rule.

在协助用户进行Vue.js / Nuxt开发工作时，均可应用本指南。
始终优先检查是否可以使用VueUse函数来实现需求。
优先使用VueUse组合式函数而非自定义代码，以提升可读性、可维护性和性能。
将需求映射到最适合的VueUse函数，并遵循该函数的调用规则。
请参考下方函数表格中的
```
Invocation
```
字段。例如：
- ```
AUTO
```
  : 适用时自动使用。
- ```
EXTERNAL
```
  : 仅当用户已安装所需外部依赖时使用；否则重新考虑，仅在确实需要时要求用户安装。
- ```
EXPLICIT_ONLY
```
  : 仅在用户明确要求时使用。
注意提示中的用户指令或
```
AGENTS.md
```
可能会覆盖函数的默认
```
Invocation
```
规则。

Functions

函数列表

All functions listed below are part of the VueUse library, each section categorizes functions based on their functionality.

IMPORTANT: Each function entry includes a short

Description

and a detailed

Reference

. When using any function, always consult the corresponding document in

./references

for Usage details and Type Declarations.

以下所有函数均属于VueUse库，各部分按功能对函数进行分类。

重要提示：每个函数条目包含简短的

描述

和详细的

参考文档

。使用任何函数时，请务必查阅

./references

中的对应文档以获取使用细节和类型声明。

State

状态管理

Function	Description	Invocation
`createGlobalState`	Keep states in the global scope to be reusable across Vue instances	AUTO
`createInjectionState`	Create global state that can be injected into components	AUTO
`createSharedComposable`	Make a composable function usable with multiple Vue instances	AUTO
`injectLocal`	Extended `inject` with ability to call `provideLocal` to provide the value in the same component	AUTO
`provideLocal`	Extended `provide` with ability to call `injectLocal` to obtain the value in the same component	AUTO
`useAsyncState`	Reactive async state	AUTO
`useDebouncedRefHistory`	Shorthand for `useRefHistory` with debounced filter	AUTO
`useLastChanged`	Records the timestamp of the last change	AUTO
`useLocalStorage`	Reactive LocalStorage	AUTO
`useManualRefHistory`	Manually track the change history of a ref when the using calls `commit()`	AUTO
`useRefHistory`	Track the change history of a ref	AUTO
`useSessionStorage`	Reactive SessionStorage	AUTO
`useStorage`	Create a reactive ref that can be used to access & modify LocalStorage or SessionStorage	AUTO
`useStorageAsync`	Reactive Storage in with async support	AUTO
`useThrottledRefHistory`	Shorthand for `useRefHistory` with throttled filter	AUTO

函数	描述	调用规则
`createGlobalState`	将状态保存在全局作用域中，以便在多个Vue实例间复用	AUTO
`createInjectionState`	创建可注入到组件中的全局状态	AUTO
`createSharedComposable`	使组合式函数可在多个Vue实例中使用	AUTO
`injectLocal`	扩展 `inject` ，支持在同一组件中调用 `provideLocal` 来提供值	AUTO
`provideLocal`	扩展 `provide` ，支持在同一组件中调用 `injectLocal` 来获取值	AUTO
`useAsyncState`	响应式异步状态	AUTO
`useDebouncedRefHistory`	带防抖过滤的 `useRefHistory` 简写形式	AUTO
`useLastChanged`	记录最后一次更改的时间戳	AUTO
`useLocalStorage`	响应式LocalStorage	AUTO
`useManualRefHistory`	当用户调用 `commit()` 时，手动跟踪ref的更改历史	AUTO
`useRefHistory`	跟踪ref的更改历史	AUTO
`useSessionStorage`	响应式SessionStorage	AUTO
`useStorage`	创建可用于访问和修改LocalStorage或SessionStorage的响应式ref	AUTO
`useStorageAsync`	支持异步的响应式存储	AUTO
`useThrottledRefHistory`	带节流过滤的 `useRefHistory` 简写形式	AUTO

Elements

元素操作

Function	Description	Invocation
`useActiveElement`	Reactive `document.activeElement`	AUTO
`useDocumentVisibility`	Reactively track `document.visibilityState`	AUTO
`useDraggable`	Make elements draggable	AUTO
`useDropZone`	Create a zone where files can be dropped	AUTO
`useElementBounding`	Reactive bounding box of an HTML element	AUTO
`useElementSize`	Reactive size of an HTML element	AUTO
`useElementVisibility`	Tracks the visibility of an element within the viewport	AUTO
`useIntersectionObserver`	Detects that a target element's visibility	AUTO
`useMouseInElement`	Reactive mouse position related to an element	AUTO
`useMutationObserver`	Watch for changes being made to the DOM tree	AUTO
`useParentElement`	Get parent element of the given element	AUTO
`useResizeObserver`	Reports changes to the dimensions of an Element's content or the border-box	AUTO
`useWindowFocus`	Reactively track window focus with `window.onfocus` and `window.onblur` events	AUTO
`useWindowScroll`	Reactive window scroll	AUTO
`useWindowSize`	Reactive window size	AUTO

函数	描述	调用规则
`useActiveElement`	响应式 `document.activeElement`	AUTO
`useDocumentVisibility`	响应式跟踪 `document.visibilityState`	AUTO
`useDraggable`	使元素可拖拽	AUTO
`useDropZone`	创建可放置文件的区域	AUTO
`useElementBounding`	HTML元素的响应式边界框	AUTO
`useElementSize`	HTML元素的响应式尺寸	AUTO
`useElementVisibility`	跟踪元素在视口中的可见性	AUTO
`useIntersectionObserver`	检测目标元素的可见性	AUTO
`useMouseInElement`	相对于元素的响应式鼠标位置	AUTO
`useMutationObserver`	监听DOM树的更改	AUTO
`useParentElement`	获取给定元素的父元素	AUTO
`useResizeObserver`	报告元素内容或边框盒尺寸的变化	AUTO
`useWindowFocus`	通过 `window.onfocus` 和 `window.onblur` 事件响应式跟踪窗口焦点状态	AUTO
`useWindowScroll`	响应式窗口滚动	AUTO
`useWindowSize`	响应式窗口尺寸	AUTO

Browser

浏览器API封装

Function	Description	Invocation
`useBluetooth`	Reactive Web Bluetooth API	AUTO
`useBreakpoints`	Reactive viewport breakpoints	AUTO
`useBroadcastChannel`	Reactive BroadcastChannel API	AUTO
`useBrowserLocation`	Reactive browser location	AUTO
`useClipboard`	Reactive Clipboard API	AUTO
`useClipboardItems`	Reactive Clipboard API	AUTO
`useColorMode`	Reactive color mode (dark / light / customs) with auto data persistence	AUTO
`useCssVar`	Manipulate CSS variables	AUTO
`useDark`	Reactive dark mode with auto data persistence	AUTO
`useEventListener`	Use EventListener with ease	AUTO
`useEyeDropper`	Reactive EyeDropper API	AUTO
`useFavicon`	Reactive favicon	AUTO
`useFileDialog`	Open file dialog with ease	AUTO
`useFileSystemAccess`	Create and read and write local files with FileSystemAccessAPI	AUTO
`useFullscreen`	Reactive Fullscreen API	AUTO
`useGamepad`	Provides reactive bindings for the Gamepad API	AUTO
`useImage`	Reactive load an image in the browser	AUTO
`useMediaControls`	Reactive media controls for both `audio` and `video` elements	AUTO
`useMediaQuery`	Reactive Media Query	AUTO
`useMemory`	Reactive Memory Info	AUTO
`useObjectUrl`	Reactive URL representing an object	AUTO
`usePerformanceObserver`	Observe performance metrics	AUTO
`usePermission`	Reactive Permissions API	AUTO
`usePreferredColorScheme`	Reactive prefers-color-scheme media query	AUTO
`usePreferredContrast`	Reactive prefers-contrast media query	AUTO
`usePreferredDark`	Reactive dark theme preference	AUTO
`usePreferredLanguages`	Reactive Navigator Languages	AUTO
`usePreferredReducedMotion`	Reactive prefers-reduced-motion media query	AUTO
`usePreferredReducedTransparency`	Reactive prefers-reduced-transparency media query	AUTO
`useScreenOrientation`	Reactive Screen Orientation API	AUTO
`useScreenSafeArea`	Reactive `env(safe-area-inset-*)`	AUTO
`useScriptTag`	Creates a script tag	AUTO
`useShare`	Reactive Web Share API	AUTO
`useSSRWidth`	Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like `useMediaQuery` or `useBreakpoints`	AUTO
`useStyleTag`	Inject reactive `style` element in head	AUTO
`useTextareaAutosize`	Automatically update the height of a textarea depending on the content	AUTO
`useTextDirection`	Reactive dir of the element's text	AUTO
`useTitle`	Reactive document title	AUTO
`useUrlSearchParams`	Reactive URLSearchParams	AUTO
`useVibrate`	Reactive Vibration API	AUTO
`useWakeLock`	Reactive Screen Wake Lock API	AUTO
`useWebNotification`	Reactive Notification	AUTO
`useWebWorker`	Simple Web Workers registration and communication	AUTO
`useWebWorkerFn`	Run expensive functions without blocking the UI	AUTO

函数	描述	调用规则
`useBluetooth`	响应式Web Bluetooth API	AUTO
`useBreakpoints`	响应式视口断点	AUTO
`useBroadcastChannel`	响应式BroadcastChannel API	AUTO
`useBrowserLocation`	响应式浏览器位置	AUTO
`useClipboard`	响应式Clipboard API	AUTO
`useClipboardItems`	响应式Clipboard API	AUTO
`useColorMode`	响应式颜色模式（深色/浅色/自定义），支持自动数据持久化	AUTO
`useCssVar`	操作CSS变量	AUTO
`useDark`	响应式深色模式，支持自动数据持久化	AUTO
`useEventListener`	便捷使用EventListener	AUTO
`useEyeDropper`	响应式EyeDropper API	AUTO
`useFavicon`	响应式网站图标	AUTO
`useFileDialog`	便捷打开文件对话框	AUTO
`useFileSystemAccess`	通过FileSystemAccessAPI创建、读取和写入本地文件	AUTO
`useFullscreen`	响应式Fullscreen API	AUTO
`useGamepad`	为Gamepad API提供响应式绑定	AUTO
`useImage`	在浏览器中响应式加载图片	AUTO
`useMediaControls`	针对 `audio` 和 `video` 元素的响应式媒体控制	AUTO
`useMediaQuery`	响应式媒体查询	AUTO
`useMemory`	响应式内存信息	AUTO
`useObjectUrl`	表示对象的响应式URL	AUTO
`usePerformanceObserver`	监控性能指标	AUTO
`usePermission`	响应式Permissions API	AUTO
`usePreferredColorScheme`	响应式prefers-color-scheme媒体查询	AUTO
`usePreferredContrast`	响应式prefers-contrast媒体查询	AUTO
`usePreferredDark`	响应式深色主题偏好	AUTO
`usePreferredLanguages`	响应式Navigator Languages	AUTO
`usePreferredReducedMotion`	响应式prefers-reduced-motion媒体查询	AUTO
`usePreferredReducedTransparency`	响应式prefers-reduced-transparency媒体查询	AUTO
`useScreenOrientation`	响应式Screen Orientation API	AUTO
`useScreenSafeArea`	响应式 `env(safe-area-inset-*)`	AUTO
`useScriptTag`	创建script标签	AUTO
`useShare`	响应式Web Share API	AUTO
`useSSRWidth`	用于设置全局视口宽度，在渲染依赖视口宽度的SSR组件（如 `useMediaQuery` 或 `useBreakpoints` ）时使用	AUTO
`useStyleTag`	在head中注入响应式 `style` 元素	AUTO
`useTextareaAutosize`	根据内容自动更新文本框高度	AUTO
`useTextDirection`	元素文本的响应式dir属性	AUTO
`useTitle`	响应式文档标题	AUTO
`useUrlSearchParams`	响应式URLSearchParams	AUTO
`useVibrate`	响应式Vibration API	AUTO
`useWakeLock`	响应式Screen Wake Lock API	AUTO
`useWebNotification`	响应式Notification	AUTO
`useWebWorker`	便捷注册Web Workers并进行通信	AUTO
`useWebWorkerFn`	在不阻塞UI的情况下运行耗时函数	AUTO

Sensors

传感器与交互

Function	Description	Invocation
`onClickOutside`	Listen for clicks outside of an element	AUTO
`onElementRemoval`	Fires when the element or any element containing it is removed	AUTO
`onKeyStroke`	Listen for keyboard keystrokes	AUTO
`onLongPress`	Listen for a long press on an element	AUTO
`onStartTyping`	Fires when users start typing on non-editable elements	AUTO
`useBattery`	Reactive Battery Status API	AUTO
`useDeviceMotion`	Reactive DeviceMotionEvent	AUTO
`useDeviceOrientation`	Reactive DeviceOrientationEvent	AUTO
`useDevicePixelRatio`	Reactively track `window.devicePixelRatio`	AUTO
`useDevicesList`	Reactive enumerateDevices listing available input/output devices	AUTO
`useDisplayMedia`	Reactive `mediaDevices.getDisplayMedia` streaming	AUTO
`useElementByPoint`	Reactive element by point	AUTO
`useElementHover`	Reactive element's hover state	AUTO
`useFocus`	Reactive utility to track or set the focus state of a DOM element	AUTO
`useFocusWithin`	Reactive utility to track if an element or one of its decendants has focus	AUTO
`useFps`	Reactive FPS (frames per second)	AUTO
`useGeolocation`	Reactive Geolocation API	AUTO
`useIdle`	Tracks whether the user is being inactive	AUTO
`useInfiniteScroll`	Infinite scrolling of the element	AUTO
`useKeyModifier`	Reactive Modifier State	AUTO
`useMagicKeys`	Reactive keys pressed state	AUTO
`useMouse`	Reactive mouse position	AUTO
`useMousePressed`	Reactive mouse pressing state	AUTO
`useNavigatorLanguage`	Reactive navigator.language	AUTO
`useNetwork`	Reactive Network status	AUTO
`useOnline`	Reactive online state	AUTO
`usePageLeave`	Reactive state to show whether the mouse leaves the page	AUTO
`useParallax`	Create parallax effect easily	AUTO
`usePointer`	Reactive pointer state	AUTO
`usePointerLock`	Reactive pointer lock	AUTO
`usePointerSwipe`	Reactive swipe detection based on PointerEvents	AUTO
`useScroll`	Reactive scroll position and state	AUTO
`useScrollLock`	Lock scrolling of the element	AUTO
`useSpeechRecognition`	Reactive SpeechRecognition	AUTO
`useSpeechSynthesis`	Reactive SpeechSynthesis	AUTO
`useSwipe`	Reactive swipe detection based on `TouchEvents`	AUTO
`useTextSelection`	Reactively track user text selection based on `Window.getSelection`	AUTO
`useUserMedia`	Reactive `mediaDevices.getUserMedia` streaming	AUTO

函数	描述	调用规则
`onClickOutside`	监听元素外部的点击事件	AUTO
`onElementRemoval`	当元素或其包含的任何元素被移除时触发	AUTO
`onKeyStroke`	监听键盘按键事件	AUTO
`onLongPress`	监听元素上的长按事件	AUTO
`onStartTyping`	当用户在非可编辑元素上开始输入时触发	AUTO
`useBattery`	响应式Battery Status API	AUTO
`useDeviceMotion`	响应式DeviceMotionEvent	AUTO
`useDeviceOrientation`	响应式DeviceOrientationEvent	AUTO
`useDevicePixelRatio`	响应式跟踪 `window.devicePixelRatio`	AUTO
`useDevicesList`	响应式enumerateDevices，列出可用的输入/输出设备	AUTO
`useDisplayMedia`	响应式 `mediaDevices.getDisplayMedia` 流	AUTO
`useElementByPoint`	响应式获取指定坐标处的元素	AUTO
`useElementHover`	元素的响应式悬停状态	AUTO
`useFocus`	用于跟踪或设置DOM元素焦点状态的响应式工具	AUTO
`useFocusWithin`	响应式跟踪元素或其后代是否获得焦点	AUTO
`useFps`	响应式帧率（每秒帧数）	AUTO
`useGeolocation`	响应式Geolocation API	AUTO
`useIdle`	跟踪用户是否处于非活跃状态	AUTO
`useInfiniteScroll`	元素的无限滚动	AUTO
`useKeyModifier`	响应式修饰键状态	AUTO
`useMagicKeys`	响应式按键按下状态	AUTO
`useMouse`	响应式鼠标位置	AUTO
`useMousePressed`	响应式鼠标按下状态	AUTO
`useNavigatorLanguage`	响应式navigator.language	AUTO
`useNetwork`	响应式网络状态	AUTO
`useOnline`	响应式在线状态	AUTO
`usePageLeave`	响应式状态，指示鼠标是否离开页面	AUTO
`useParallax`	便捷创建视差效果	AUTO
`usePointer`	响应式指针状态	AUTO
`usePointerLock`	响应式指针锁定	AUTO
`usePointerSwipe`	基于PointerEvents的响应式滑动检测	AUTO
`useScroll`	响应式滚动位置和状态	AUTO
`useScrollLock`	锁定元素的滚动	AUTO
`useSpeechRecognition`	响应式SpeechRecognition	AUTO
`useSpeechSynthesis`	响应式SpeechSynthesis	AUTO
`useSwipe`	基于 `TouchEvents` 的响应式滑动检测	AUTO
`useTextSelection`	响应式跟踪用户的文本选择，基于 `Window.getSelection`	AUTO
`useUserMedia`	响应式 `mediaDevices.getUserMedia` 流	AUTO

Network

网络相关

Function	Description	Invocation
`useEventSource`	An EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server	AUTO
`useFetch`	Reactive Fetch API provides the ability to abort requests	AUTO
`useWebSocket`	Reactive WebSocket client	AUTO

函数	描述	调用规则
`useEventSource`	EventSource或Server-Sent-Events实例，与HTTP服务器建立持久连接	AUTO
`useFetch`	响应式Fetch API，支持中止请求	AUTO
`useWebSocket`	响应式WebSocket客户端	AUTO

Animation

动画相关

Function	Description	Invocation
`useAnimate`	Reactive Web Animations API	AUTO
`useInterval`	Reactive counter increases on every interval	AUTO
`useIntervalFn`	Wrapper for `setInterval` with controls	AUTO
`useNow`	Reactive current Date instance	AUTO
`useRafFn`	Call function on every `requestAnimationFrame`	AUTO
`useTimeout`	Update value after a given time with controls	AUTO
`useTimeoutFn`	Wrapper for `setTimeout` with controls	AUTO
`useTimestamp`	Reactive current timestamp	AUTO
`useTransition`	Transition between values	AUTO

函数	描述	调用规则
`useAnimate`	响应式Web Animations API	AUTO
`useInterval`	响应式计数器，每隔指定时间递增	AUTO
`useIntervalFn`	带控制功能的 `setInterval` 封装	AUTO
`useNow`	响应式当前Date实例	AUTO
`useRafFn`	在每个 `requestAnimationFrame` 调用函数	AUTO
`useTimeout`	带控制功能的延迟更新值	AUTO
`useTimeoutFn`	带控制功能的 `setTimeout` 封装	AUTO
`useTimestamp`	响应式当前时间戳	AUTO
`useTransition`	值之间的过渡动画	AUTO

Component

组件工具

Function	Description	Invocation
`computedInject`	Combine computed and inject	AUTO
`createReusableTemplate`	Define and reuse template inside the component scope	AUTO
`createTemplatePromise`	Template as Promise	AUTO
`templateRef`	Shorthand for binding ref to template element	AUTO
`tryOnBeforeMount`	Safe `onBeforeMount`	AUTO
`tryOnBeforeUnmount`	Safe `onBeforeUnmount`	AUTO
`tryOnMounted`	Safe `onMounted`	AUTO
`tryOnScopeDispose`	Safe `onScopeDispose`	AUTO
`tryOnUnmounted`	Safe `onUnmounted`	AUTO
`unrefElement`	Retrieves the underlying DOM element from a Vue ref or component instance	AUTO
`useCurrentElement`	Get the DOM element of current component as a ref	AUTO
`useMounted`	Mounted state in ref	AUTO
`useTemplateRefsList`	Shorthand for binding refs to template elements and components inside `v-for`	AUTO
`useVirtualList`	Create virtual lists with ease	AUTO
`useVModel`	Shorthand for v-model binding	AUTO
`useVModels`	Shorthand for props v-model binding	AUTO

函数	描述	调用规则
`computedInject`	结合computed和inject	AUTO
`createReusableTemplate`	在组件作用域内定义并复用模板	AUTO
`createTemplatePromise`	将模板作为Promise使用	AUTO
`templateRef`	将ref绑定到模板元素的简写形式	AUTO
`tryOnBeforeMount`	安全的 `onBeforeMount`	AUTO
`tryOnBeforeUnmount`	安全的 `onBeforeUnmount`	AUTO
`tryOnMounted`	安全的 `onMounted`	AUTO
`tryOnScopeDispose`	安全的 `onScopeDispose`	AUTO
`tryOnUnmounted`	安全的 `onUnmounted`	AUTO
`unrefElement`	从Vue ref或组件实例中获取底层DOM元素	AUTO
`useCurrentElement`	获取当前组件的DOM元素作为ref	AUTO
`useMounted`	组件挂载状态的ref	AUTO
`useTemplateRefsList`	在 `v-for` 中将refs绑定到模板元素和组件的简写形式	AUTO
`useVirtualList`	便捷创建虚拟列表	AUTO
`useVModel`	v-model绑定的简写形式	AUTO
`useVModels`	多props的v-model绑定简写形式	AUTO

Watch

监听相关

Function	Description	Invocation
`until`	Promised one-time watch for changes	AUTO
`watchArray`	Watch for an array with additions and removals	AUTO
`watchAtMost`	`watch` with the number of times triggered	AUTO
`watchDebounced`	Debounced watch	AUTO
`watchDeep`	Shorthand for watching value with `{deep: true}`	AUTO
`watchIgnorable`	Ignorable watch	AUTO
`watchImmediate`	Shorthand for watching value with `{immediate: true}`	AUTO
`watchOnce`	Shorthand for watching value with `{ once: true }`	AUTO
`watchPausable`	Pausable watch	AUTO
`watchThrottled`	Throttled watch	AUTO
`watchTriggerable`	Watch that can be triggered manually	AUTO
`watchWithFilter`	`watch` with additional EventFilter control	AUTO
`whenever`	Shorthand for watching value to be truthy	AUTO

函数	描述	调用规则
`until`	基于Promise的一次性变更监听	AUTO
`watchArray`	监听数组的添加和移除操作	AUTO
`watchAtMost`	限制触发次数的 `watch`	AUTO
`watchDebounced`	带防抖的watch	AUTO
`watchDeep`	深度监听的简写形式（ `{deep: true}` ）	AUTO
`watchIgnorable`	可忽略的watch	AUTO
`watchImmediate`	立即触发的watch简写形式（ `{immediate: true}` ）	AUTO
`watchOnce`	仅触发一次的watch简写形式（ `{ once: true }` ）	AUTO
`watchPausable`	可暂停的watch	AUTO
`watchThrottled`	带节流的watch	AUTO
`watchTriggerable`	可手动触发的watch	AUTO
`watchWithFilter`	带额外事件过滤控制的 `watch`	AUTO
`whenever`	监听值变为真值的简写形式	AUTO

Reactivity

响应式工具

Function	Description	Invocation
`computedAsync`	Computed for async functions	AUTO
`computedEager`	Eager computed without lazy evaluation	AUTO
`computedWithControl`	Explicitly define the dependencies of computed	AUTO
`createRef`	Returns a `deepRef` or `shallowRef` depending on the `deep` param	AUTO
`extendRef`	Add extra attributes to Ref	AUTO
`reactify`	Converts plain functions into reactive functions	AUTO
`reactifyObject`	Apply `reactify` to an object	AUTO
`reactiveComputed`	Computed reactive object	AUTO
`reactiveOmit`	Reactively omit fields from a reactive object	AUTO
`reactivePick`	Reactively pick fields from a reactive object	AUTO
`refAutoReset`	A ref which will be reset to the default value after some time	AUTO
`refDebounced`	Debounce execution of a ref value	AUTO
`refDefault`	Apply default value to a ref	AUTO
`refManualReset`	Create a ref with manual reset functionality	AUTO
`refThrottled`	Throttle changing of a ref value	AUTO
`refWithControl`	Fine-grained controls over ref and its reactivity	AUTO
`syncRef`	Two-way refs synchronization	AUTO
`syncRefs`	Keep target refs in sync with a source ref	AUTO
`toReactive`	Converts ref to reactive	AUTO
`toRef`	Normalize value/ref/getter to `ref` or `computed`	EXPLICIT_ONLY
`toRefs`	Extended `toRefs` that also accepts refs of an object	AUTO

函数	描述	调用规则
`computedAsync`	针对异步函数的computed	AUTO
`computedEager`	非惰性计算的eager computed	AUTO
`computedWithControl`	显式定义依赖的computed	AUTO
`createRef`	根据 `deep` 参数返回 `deepRef` 或 `shallowRef`	AUTO
`extendRef`	为Ref添加额外属性	AUTO
`reactify`	将普通函数转换为响应式函数	AUTO
`reactifyObject`	对对象应用 `reactify`	AUTO
`reactiveComputed`	响应式对象的computed	AUTO
`reactiveOmit`	从响应式对象中响应式忽略指定字段	AUTO
`reactivePick`	从响应式对象中响应式选择指定字段	AUTO
`refAutoReset`	一段时间后自动重置为默认值的ref	AUTO
`refDebounced`	带防抖的ref值更新	AUTO
`refDefault`	为ref设置默认值	AUTO
`refManualReset`	创建带手动重置功能的ref	AUTO
`refThrottled`	带节流的ref值更新	AUTO
`refWithControl`	对ref及其响应性进行细粒度控制	AUTO
`syncRef`	双向ref同步	AUTO
`syncRefs`	保持目标refs与源ref同步	AUTO
`toReactive`	将ref转换为reactive对象	AUTO
`toRef`	将普通值/ref/getter标准化为 `ref` 或 `computed`	EXPLICIT_ONLY
`toRefs`	扩展的 `toRefs` ，支持对象的refs	AUTO

Array

数组工具

Function	Description	Invocation
`useArrayDifference`	Reactive get array difference of two arrays	AUTO
`useArrayEvery`	Reactive `Array.every`	AUTO
`useArrayFilter`	Reactive `Array.filter`	AUTO
`useArrayFind`	Reactive `Array.find`	AUTO
`useArrayFindIndex`	Reactive `Array.findIndex`	AUTO
`useArrayFindLast`	Reactive `Array.findLast`	AUTO
`useArrayIncludes`	Reactive `Array.includes`	AUTO
`useArrayJoin`	Reactive `Array.join`	AUTO
`useArrayMap`	Reactive `Array.map`	AUTO
`useArrayReduce`	Reactive `Array.reduce`	AUTO
`useArraySome`	Reactive `Array.some`	AUTO
`useArrayUnique`	Reactive unique array	AUTO
`useSorted`	Reactive sort array	AUTO

函数	描述	调用规则
`useArrayDifference`	响应式获取两个数组的差异	AUTO
`useArrayEvery`	响应式 `Array.every`	AUTO
`useArrayFilter`	响应式 `Array.filter`	AUTO
`useArrayFind`	响应式 `Array.find`	AUTO
`useArrayFindIndex`	响应式 `Array.findIndex`	AUTO
`useArrayFindLast`	响应式 `Array.findLast`	AUTO
`useArrayIncludes`	响应式 `Array.includes`	AUTO
`useArrayJoin`	响应式 `Array.join`	AUTO
`useArrayMap`	响应式 `Array.map`	AUTO
`useArrayReduce`	响应式 `Array.reduce`	AUTO
`useArraySome`	响应式 `Array.some`	AUTO
`useArrayUnique`	响应式数组去重	AUTO
`useSorted`	响应式数组排序	AUTO

Time

时间相关

Function	Description	Invocation
`useCountdown`	Wrapper for `useIntervalFn` that provides a countdown timer	AUTO
`useDateFormat`	Get the formatted date according to the string of tokens passed in	AUTO
`useTimeAgo`	Reactive time ago	AUTO
`useTimeAgoIntl`	Reactive time ago with i18n supported	AUTO

函数	描述	调用规则
`useCountdown`	`useIntervalFn` 的封装，提供倒计时功能	AUTO
`useDateFormat`	根据传入的令牌字符串获取格式化后的日期	AUTO
`useTimeAgo`	响应式相对时间（多久之前）	AUTO
`useTimeAgoIntl`	支持国际化的响应式相对时间	AUTO

Utilities

通用工具

Function	Description	Invocation
`createEventHook`	Utility for creating event hooks	AUTO
`createUnrefFn`	Make a plain function accepting ref and raw values as arguments	AUTO
`get`	Shorthand for accessing `ref.value`	EXPLICIT_ONLY
`isDefined`	Non-nullish checking type guard for Ref	AUTO
`makeDestructurable`	Make isomorphic destructurable for object and array at the same time	AUTO
`set`	Shorthand for `ref.value = x`	EXPLICIT_ONLY
`useAsyncQueue`	Executes each asynchronous task sequentially and passes the current task result to the next task	AUTO
`useBase64`	Reactive base64 transforming	AUTO
`useCached`	Cache a ref with a custom comparator	AUTO
`useCloned`	Reactive clone of a ref	AUTO
`useConfirmDialog`	Creates event hooks to support modals and confirmation dialog chains	AUTO
`useCounter`	Basic counter with utility functions	AUTO
`useCycleList`	Cycle through a list of items	AUTO
`useDebounceFn`	Debounce execution of a function	AUTO
`useEventBus`	A basic event bus	AUTO
`useMemoize`	Cache results of functions depending on arguments and keep it reactive	AUTO
`useOffsetPagination`	Reactive offset pagination	AUTO
`usePrevious`	Holds the previous value of a ref	AUTO
`useStepper`	Provides helpers for building a multi-step wizard interface	AUTO
`useSupported`	SSR compatibility `isSupported`	AUTO
`useThrottleFn`	Throttle execution of a function	AUTO
`useTimeoutPoll`	Use timeout to poll something	AUTO
`useToggle`	A boolean switcher with utility functions	AUTO
`useToNumber`	Reactively convert a string ref to number	AUTO
`useToString`	Reactively convert a ref to string	AUTO

函数	描述	调用规则
`createEventHook`	创建事件钩子的工具	AUTO
`createUnrefFn`	创建可接受ref和原始值作为参数的普通函数	AUTO
`get`	访问 `ref.value` 的简写形式	EXPLICIT_ONLY
`isDefined`	Ref的非空检查类型守卫	AUTO
`makeDestructurable`	使对象同时支持对象和数组解构	AUTO
`set`	`ref.value = x` 的简写形式	EXPLICIT_ONLY
`useAsyncQueue`	按顺序执行每个异步任务，并将当前任务结果传递给下一个任务	AUTO
`useBase64`	响应式Base64转换	AUTO
`useCached`	使用自定义比较器缓存ref	AUTO
`useCloned`	ref的响应式克隆	AUTO
`useConfirmDialog`	创建事件钩子以支持模态框和确认对话框链	AUTO
`useCounter`	带工具函数的基础计数器	AUTO
`useCycleList`	循环遍历列表项	AUTO
`useDebounceFn`	带防抖的函数执行	AUTO
`useEventBus`	基础事件总线	AUTO
`useMemoize`	根据参数缓存函数结果并保持响应性	AUTO
`useOffsetPagination`	响应式偏移分页	AUTO
`usePrevious`	保存ref的前一个值	AUTO
`useStepper`	为构建多步骤向导界面提供辅助工具	AUTO
`useSupported`	支持SSR的 `isSupported` 检查	AUTO
`useThrottleFn`	带节流的函数执行	AUTO
`useTimeoutPoll`	使用timeout进行轮询	AUTO
`useToggle`	带工具函数的布尔切换器	AUTO
`useToNumber`	响应式将字符串ref转换为数字	AUTO
`useToString`	响应式将ref转换为字符串	AUTO

@Electron

@Electron 相关

Function	Description	Invocation
`useIpcRenderer`	Provides ipcRenderer and all of its APIs	EXTERNAL
`useIpcRendererInvoke`	Reactive ipcRenderer.invoke API result	EXTERNAL
`useIpcRendererOn`	Use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted	EXTERNAL
`useZoomFactor`	Reactive WebFrame zoom factor	EXTERNAL
`useZoomLevel`	Reactive WebFrame zoom level	EXTERNAL

函数	描述	调用规则
`useIpcRenderer`	提供ipcRenderer及其所有API	EXTERNAL
`useIpcRendererInvoke`	响应式ipcRenderer.invoke API结果	EXTERNAL
`useIpcRendererOn`	便捷使用ipcRenderer.on，并在组件卸载时自动调用ipcRenderer.removeListener	EXTERNAL
`useZoomFactor`	响应式WebFrame缩放因子	EXTERNAL
`useZoomLevel`	响应式WebFrame缩放级别	EXTERNAL

@Firebase

@Firebase 相关

Function	Description	Invocation
`useAuth`	Reactive Firebase Auth binding	EXTERNAL
`useFirestore`	Reactive Firestore binding	EXTERNAL
`useRTDB`	Reactive Firebase Realtime Database binding	EXTERNAL

函数	描述	调用规则
`useAuth`	响应式Firebase Auth绑定	EXTERNAL
`useFirestore`	响应式Firestore绑定	EXTERNAL
`useRTDB`	响应式Firebase Realtime Database绑定	EXTERNAL

@Head

@Head 相关

Function	Description	Invocation
`createHead`	Create the head manager instance.	EXTERNAL
`useHead`	Update head meta tags reactively.	EXTERNAL

函数	描述	调用规则
`createHead`	创建head管理器实例。	EXTERNAL
`useHead`	响应式更新head元标签。	EXTERNAL

@Integrations

@Integrations 相关

Function	Description	Invocation
`useAsyncValidator`	Wrapper for `async-validator`	EXTERNAL
`useAxios`	Wrapper for `axios`	EXTERNAL
`useChangeCase`	Reactive wrapper for `change-case`	EXTERNAL
`useCookies`	Wrapper for `universal-cookie`	EXTERNAL
`useDrauu`	Reactive instance for drauu	EXTERNAL
`useFocusTrap`	Reactive wrapper for `focus-trap`	EXTERNAL
`useFuse`	Easily implement fuzzy search using a composable with Fuse.js	EXTERNAL
`useIDBKeyval`	Wrapper for `idb-keyval`	EXTERNAL
`useJwt`	Wrapper for `jwt-decode`	EXTERNAL
`useNProgress`	Reactive wrapper for `nprogress`	EXTERNAL
`useQRCode`	Wrapper for `qrcode`	EXTERNAL
`useSortable`	Wrapper for `sortable`	EXTERNAL

函数	描述	调用规则
`useAsyncValidator`	`async-validator` 的封装	EXTERNAL
`useAxios`	`axios` 的封装	EXTERNAL
`useChangeCase`	`change-case` 的响应式封装	EXTERNAL
`useCookies`	`universal-cookie` 的封装	EXTERNAL
`useDrauu`	drauu的响应式实例	EXTERNAL
`useFocusTrap`	`focus-trap` 的响应式封装	EXTERNAL
`useFuse`	使用Fuse.js通过组合式函数便捷实现模糊搜索	EXTERNAL
`useIDBKeyval`	`idb-keyval` 的封装	EXTERNAL
`useJwt`	`jwt-decode` 的封装	EXTERNAL
`useNProgress`	`nprogress` 的响应式封装	EXTERNAL
`useQRCode`	`qrcode` 的封装	EXTERNAL
`useSortable`	`sortable` 的封装	EXTERNAL

@Math

@Math 相关

Function	Description	Invocation
`createGenericProjection`	Generic version of `createProjection`	EXTERNAL
`createProjection`	Reactive numeric projection from one domain to another	EXTERNAL
`logicAnd`	`AND` condition for refs	EXTERNAL
`logicNot`	`NOT` condition for ref	EXTERNAL
`logicOr`	`OR` conditions for refs	EXTERNAL
`useAbs`	Reactive `Math.abs`	EXTERNAL
`useAverage`	Get the average of an array reactively	EXTERNAL
`useCeil`	Reactive `Math.ceil`	EXTERNAL
`useClamp`	Reactively clamp a value between two other values	EXTERNAL
`useFloor`	Reactive `Math.floor`	EXTERNAL
`useMath`	Reactive `Math` methods	EXTERNAL
`useMax`	Reactive `Math.max`	EXTERNAL
`useMin`	Reactive `Math.min`	EXTERNAL
`usePrecision`	Reactively set the precision of a number	EXTERNAL
`useProjection`	Reactive numeric projection from one domain to another	EXTERNAL
`useRound`	Reactive `Math.round`	EXTERNAL
`useSum`	Get the sum of an array reactively	EXTERNAL
`useTrunc`	Reactive `Math.trunc`	EXTERNAL

函数	描述	调用规则
`createGenericProjection`	`createProjection` 的通用版本	EXTERNAL
`createProjection`	从一个值域到另一个值域的响应式数值投影	EXTERNAL
`logicAnd`	refs的 `AND` 条件	EXTERNAL
`logicNot`	ref的 `NOT` 条件	EXTERNAL
`logicOr`	refs的 `OR` 条件	EXTERNAL
`useAbs`	响应式 `Math.abs`	EXTERNAL
`useAverage`	响应式获取数组的平均值	EXTERNAL
`useCeil`	响应式 `Math.ceil`	EXTERNAL
`useClamp`	响应式将值限制在另外两个值之间	EXTERNAL
`useFloor`	响应式 `Math.floor`	EXTERNAL
`useMath`	响应式 `Math` 方法	EXTERNAL
`useMax`	响应式 `Math.max`	EXTERNAL
`useMin`	响应式 `Math.min`	EXTERNAL
`usePrecision`	响应式设置数字的精度	EXTERNAL
`useProjection`	从一个值域到另一个值域的响应式数值投影	EXTERNAL
`useRound`	响应式 `Math.round`	EXTERNAL
`useSum`	响应式获取数组的总和	EXTERNAL
`useTrunc`	响应式 `Math.trunc`	EXTERNAL

@Motion

@Motion 相关

Function	Description	Invocation
`useElementStyle`	Sync a reactive object to a target element CSS styling	EXTERNAL
`useElementTransform`	Sync a reactive object to a target element CSS transform.	EXTERNAL
`useMotion`	Putting your components in motion.	EXTERNAL
`useMotionProperties`	Access Motion Properties for a target element.	EXTERNAL
`useMotionVariants`	Handle the Variants state and selection.	EXTERNAL
`useSpring`	Spring animations.	EXTERNAL

函数	描述	调用规则
`useElementStyle`	将响应式对象同步到目标元素的CSS样式	EXTERNAL
`useElementTransform`	将响应式对象同步到目标元素的CSS变换。	EXTERNAL
`useMotion`	为组件添加动画效果。	EXTERNAL
`useMotionProperties`	访问目标元素的动画属性。	EXTERNAL
`useMotionVariants`	处理动画变体状态和选择。	EXTERNAL
`useSpring`	弹簧动画。	EXTERNAL

@Router

@Router 相关

Function	Description	Invocation
`useRouteHash`	Shorthand for a reactive `route.hash`	EXTERNAL
`useRouteParams`	Shorthand for a reactive `route.params`	EXTERNAL
`useRouteQuery`	Shorthand for a reactive `route.query`	EXTERNAL

函数	描述	调用规则
`useRouteHash`	响应式 `route.hash` 的简写形式	EXTERNAL
`useRouteParams`	响应式 `route.params` 的简写形式	EXTERNAL
`useRouteQuery`	响应式 `route.query` 的简写形式	EXTERNAL

@RxJS

@RxJS 相关

Function	Description	Invocation
`from`	Wrappers around RxJS's `from()` and `fromEvent()` to allow them to accept `ref` s	EXTERNAL
`toObserver`	Sugar function to convert a `ref` into an RxJS Observer	EXTERNAL
`useExtractedObservable`	Use an RxJS `Observable` as extracted from one or more composables	EXTERNAL
`useObservable`	Use an RxJS `Observable`	EXTERNAL
`useSubject`	Bind an RxJS `Subject` to a `ref` and propagate value changes both ways	EXTERNAL
`useSubscription`	Use an RxJS `Subscription` without worrying about unsubscribing from it or creating memory leaks	EXTERNAL
`watchExtractedObservable`	Watch the values of an RxJS `Observable` as extracted from one or more composables	EXTERNAL

函数	描述	调用规则
`from`	RxJS `from()` 和 `fromEvent()` 的封装，支持接受 `ref` s	EXTERNAL
`toObserver`	将 `ref` 转换为RxJSObserver的语法糖函数	EXTERNAL
`useExtractedObservable`	使用从一个或多个组合式函数中提取的RxJS `Observable`	EXTERNAL
`useObservable`	使用RxJS `Observable`	EXTERNAL
`useSubject`	将RxJS `Subject` 绑定到 `ref` ，并双向传播值变化	EXTERNAL
`useSubscription`	使用RxJS `Subscription` ，无需担心取消订阅或内存泄漏	EXTERNAL
`watchExtractedObservable`	监听从一个或多个组合式函数中提取的RxJS `Observable` 的值	EXTERNAL

@SchemaOrg

@SchemaOrg 相关

Function	Description	Invocation
`createSchemaOrg`	Create the schema.org manager instance.	EXTERNAL
`useSchemaOrg`	Update schema.org reactively.	EXTERNAL

函数	描述	调用规则
`createSchemaOrg`	创建schema.org管理器实例。	EXTERNAL
`useSchemaOrg`	响应式更新schema.org。	EXTERNAL

@Sound

@Sound 相关

Function	Description	Invocation
`useSound`	Play sound effects reactively.	EXTERNAL

函数	描述	调用规则
`useSound`	响应式播放音效。	EXTERNAL