⚡

VueUse函数Skill vueuse-functions

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

前端开发 0 次安装 48 次浏览 更新于 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 一个EventSource或Server-Sent-Events实例打开与HTTP服务器的持久连接 AUTO
…

动画

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

组件

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

观察

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

反应性

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

数组

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

时间

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

实用工具

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