VueUse - Shared - watchPausable

watchPausable 可暂停的监听器 #

watch 可暂停版本，可以控制执行回调的时机。

在需要限制触发时机或者触发频率的时候很有用

watchPausable #

传入参数方式 #

/**
 * @param {any} source - 需要监听的目标
 * @param {Function} cb - 回调函数
 * @param {InferEventTarget} options - 配置项
 */

watchPausable(
  source, // any
  cb, // any
  options = {}, // WatchWithFilterOptions<Immediate>
)

主体逻辑 #

1. 通过一个可暂停的事件过滤器来实现暂停时跳过触发的效果

const { eventFilter, pause, resume, isActive } = pausableFilter(filter)

2. 通过包装 watch 实现过滤器监听触发功能

const stop = watchWithFilter(
  source,
  cb,
  {
    ...watchOptions,
    eventFilter,
  },
)

涉及到的事件过滤器 #

事件过滤器 是 vueuse 中提供的一个特性，用于控制触发回调的时机。

pausableFilter #

可以用于暂停某些事件的回调执行，内部是用激活标识来控制是否执行回调的。

export function pausableFilter(extendFilter: EventFilter = bypassFilter): Pausable & { eventFilter: EventFilter } {
  const isActive = ref(true)

  function pause() {
    isActive.value = false
  }
  function resume() {
    isActive.value = true
  }

  const eventFilter: EventFilter = (...args) => {
    if (isActive.value)
      extendFilter(...args)
  }

  return { isActive, pause, resume, eventFilter }
}

watchWithFilter #

可用于控制 watch 的触发时机，内部默认是用 eventFilter 来控制触发的时机。

export function watchWithFilter<Immediate extends Readonly<boolean> = false>(
  source: any,
  cb: any,
  options: WatchWithFilterOptions<Immediate> = {},
): WatchStopHandle {
  const {
    eventFilter = bypassFilter,
    ...watchOptions
  } = options

  return watch(
    source,
    createFilterWrapper(
      eventFilter,
      cb,
    ),
    watchOptions,
  )
}