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 |
| … |