SKILL.md
只读
名称
vueuse-functions
描述
在 Vue.js / Nuxt 项目中合适场景下选用 VueUse composables，构建简洁且易维护的功能模块。
VueUse Functions
本 Skill 旨在为 Vue.js / Nuxt 项目中使用 VueUse composables 提供选型决策与实现指导。它能根据实际需求匹配最合适的 VueUse 函数，应用正确的调用模式，优先采用组合式函数方案替代自定义代码，使代码实现更加简洁、易维护且高性能。
何时使用
- 只要在 Vue.js / Nuxt 项目中协助用户进行开发工作，即可应用本 Skill。
- 务必首先检查是否有现成的 VueUse 函数能够满足需求。
- 相比手写代码，优先推荐使用 VueUse composables，以提升代码可读性、可维护性与运行性能。
- 将开发需求映射到最恰当的 VueUse 函数，并遵循该函数的调用规则。
- 请参考下方函数表中的
Invocation（调用模式）字段。例如：AUTO：只要适用即可自动使用。EXTERNAL：仅当用户已安装所需的外部依赖时使用；否则应重新评估，仅在确有需要时提示用户安装。EXPLICIT_ONLY：仅在用户明确要求时使用。
注意 Prompt 或
AGENTS.md中的用户指令可能会覆盖函数的默认Invocation规则。
函数列表
下表列出的所有函数均来自于 VueUse 库，各章节根据其功能进行分类。
重要提示：每个函数条目都包含简短的 Description（描述）和详细的 Reference（参考文档）。使用任何函数时，务必查阅 ./references 目录下对应的文档，以获取具体的用法细节及类型声明。
State
| Function | Description | Invocation |
|---|---|---|
createGlobalState |
将状态保留在全局作用域中，实现跨 Vue 实例复用 | AUTO |
createInjectionState |
创建可注入组件中的全局状态 | AUTO |
createSharedComposable |
使组合式函数可跨多个 Vue 实例共享使用 | AUTO |
injectLocal |
扩展版 inject，支持在同一组件内调用 provideLocal 来提供值 |
AUTO |
provideLocal |
扩展版 provide，支持在同一组件内调用 injectLocal 来获取值 |
AUTO |
useAsyncState |
响应式异步状态 | AUTO |
useDebouncedRefHistory |
带防抖（debounced）过滤的 useRefHistory 简写形式 |
AUTO |
useLastChanged |
记录上一次变更的时间戳 | AUTO |
useLocalStorage |
响应式 LocalStorage | AUTO |
useManualRefHistory |
在用户调用 commit() 时手动追踪 ref 的变更历史 |
AUTO |
useRefHistory |
追踪 ref 的变更历史 | AUTO |
useSessionStorage |
响应式 SessionStorage | AUTO |
useStorage |
创建响应式 ref，用于访问与修改 LocalStorage 或 SessionStorage | AUTO |
useStorageAsync |
支持异步操作的响应式 Storage | AUTO |
useThrottledRefHistory |
带节流（throttled）过滤的 useRefHistory 简写形式 |
AUTO |
Elements
| Function | Description | Invocation |
|---|---|---|
useActiveElement |
响应式 document.activeElement |
AUTO |
useDocumentVisibility |
响应式追踪 document.visibilityState |
AUTO |
useDraggable |
使元素支持拖拽 | AUTO |
useDropZone |
创建支持文件拖放的区域 | AUTO |
useElementBounding |
HTML 元素的响应式 边界矩形（bounding box） | AUTO |
useElementSize |
HTML 元素的响应式尺寸 | AUTO |
useElementVisibility |
追踪元素在视口内的可见性 | AUTO |
useIntersectionObserver |
监听目标元素可见性的变化 | AUTO |
useMouseInElement |
相对于元素的响应式鼠标位置 | AUTO |
useMutationObserver |
监听 DOM 树的变更 | AUTO |
useParentElement |
获取给定元素的父元素 | AUTO |
useResizeObserver |
报告元素内容或边框盒（border-box）尺寸的变化 | AUTO |
useWindowFocus |
通过 window.onfocus 和 window.onblur 事件响应式追踪窗口焦点 |
AUTO |
useWindowScroll |
响应式窗口滚动 | AUTO |
useWindowSize |
响应式窗口尺寸 | AUTO |
Browser
<!-- truncated for translation batch; full body continues in source -->
