VueUse函数Skill vueuse-functions

VueUse 函数库提供了一套丰富的Vue.js和Nuxt项目中的响应式和功能性工具,旨在通过预制的composable函数简化开发流程,提高代码的可读性和维护性。

前端开发 0 次安装 11 次浏览 更新于 3/1/2026

VueUse 函数

这是一个VueUse composables在Vue.js / Nuxt项目中的决策和实现指南。它将需求映射到最合适的VueUse函数,应用正确的使用模式,并优先选择基于composable的解决方案,以保持实现简洁、可维护和性能。

何时应用

  • 每当协助用户在Vue.js / Nuxt中开发工作时应用此技能。
  • 首先检查VueUse函数是否可以实现需求。
  • 优先选择VueUse composables而不是自定义代码,以提高可读性、可维护性和性能。
  • 将需求映射到最合适的VueUse函数,并遵循函数的调用规则。
  • 请参阅下面函数表中的Invocation字段。例如:
    • AUTO: 在适用时自动使用。
    • EXTERNAL: 仅当用户已经安装了所需的外部依赖时使用;否则重新考虑,并在真正需要时请求安装。
    • EXPLICIT_ONLY: 仅在用户明确请求时使用。

    用户在提示或AGENTS.md中的说明可能会覆盖函数的默认Invocation规则。

函数

下面列出的所有函数都是VueUse库的一部分,每个部分根据它们的功能对函数进行分类。 重要的:每个函数条目都包括一个简短的描述和一个详细的参考。使用任何函数时,始终参考./references中相应的文档以获取使用详情和类型声明。

状态

函数 描述 调用
createGlobalState 在全局作用域中保持状态,以便在Vue实例之间重用 AUTO
createInjectionState 创建可以注入到组件中的全局状态 AUTO

元素

函数 描述 调用
useActiveElement 反应性document.activeElement AUTO

浏览器

函数 描述 调用
useBluetooth 反应性Web Bluetooth API AUTO

传感器

函数 描述 调用
onClickOutside 监听元素外的点击 AUTO

网络

函数 描述 调用
useEventSource 一个EventSourceServer-Sent-Events实例打开与HTTP服务器的持久连接 AUTO

动画

函数 描述 调用
useAnimate 反应性Web Animations API AUTO

组件

函数 描述 调用
computedInject 组合计算和注入 AUTO

观察

函数 描述 调用
until 一次性变化的承诺观察 AUTO

反应性

函数 描述 调用
computedAsync 异步函数的计算 AUTO

数组

函数 描述 调用
useArrayDifference 反应性获取两个数组的差异 AUTO

时间

函数 描述 调用
useCountdown useIntervalFn的包装器,提供倒计时计时器 AUTO

实用工具

函数 描述 调用
createEventHook 创建事件钩子的实用工具 AUTO