VueUse 中文文档：Configurations 配置

最新推荐文章于 2025-11-16 12:52:20 发布

翻译最新推荐文章于 2025-11-16 12:52:20 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://vueuse.org/guide/config.html

文章标签：

#javascript #前端 #vue.js

VueUse 专栏收录该内容

3 篇文章

订阅专栏

VueUse从v4.0引入了事件过滤系统，如throttleFilter和debounceFilter来控制事件触发频率。用户可以使用pausableFilter暂停事件。ReactiveTiming确保函数遵循响应式系统的刷新机制。此外，配置全局依赖项允许在不同上下文中访问API，如在iframes和测试环境中。

本章主要展示对大部分VueUse函数通用的配置

Event Filters

从v4.0开始，我们提供了事件过滤系统来灵活控制何时触发事件。比如你可以使用throttleFilter和debounceFilter来控制事件触发率。

import { debounceFilter, throttleFilter, useLocalStorage, useMouse } from '@vueuse/core'

// changes will write to localStorage with a throttled 1s
const storage = useLocalStorage(
  'my-key', 
  { foo: 'bar' }, 
  { eventFilter: throttleFilter(1000) }
)

// mouse position will be updated after mouse idle for 100ms
const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

此外，你可以使用pausableFilter暂时暂停某些事件。

import { pausableFilter, useDeviceMotion } from '@vueuse/core'

const motionControl = pausableFilter()
const motion = useDeviceMotion({
  eventFilter: motionControl.eventFilter 
})

motionControl.pause()
// motion updates paused
motionControl.resume()
// motion updates resumed

Reactive Timing

VueUse 的函数尽可能遵守响应式系统下默认的时间刷新机制。
对于类watch的组件，比如pausableWatch，whenever，useStorage、useRefHistory的默认值都是{flush:'pre'}。它们将缓冲无效的结果并异步刷新这些结果。这避免了在同一tick中发生多个状态变化时不必要的重复调用。
与watch的配置方式相同，VueUse允许您通过配置flush选项来控制刷新时机。

const { pause, resume } = pausableWatch(
  () => {
    // Safely access updated DOM
  },
  { flush: 'post' },
)

flush 的选项（默认值为**pre**）

pre: 在同一tick缓冲无效结果，并在渲染前刷新他们。
post: 在同一tick缓冲无效结果，并在渲染后刷新，使你能访问更新的DOM
sync: 强制使效果同步触发。

Note: 对于类computed的组件，比如syncRef、controlledComputed，当flush可以配置时，默认值为sync，使他们与Vue中的computed refs效果一致。

Configurable Global Dependencies

从v4.0开始，访问浏览器API的函数将为您提供一个选项字段，用于指定全局依赖项（例如window、document和navigator）。默认情况下，它将使用全局实例，因此在大多数情况下，您不必担心它。此配置在iframes和测试环境的情况下非常有用。

// accessing parent context
const parentMousePos = useMouse({ window: window.parent })
const iframe = document.querySelect('#my-iframe')
// accessing child context
const childMousePos = useMouse({ window: iframe.contentWindow })

// testing
const mockWindow = { /* ... */ }
const { x, y } = useMouse({ window: mockWindow })