refDebounced

カテゴリ

リアクティビティ

エクスポートサイズ

423 B

最終変更日

先週

エイリアス

useDebouncedebouncedRef

デモ

ソース

このデモでは、遅延は1000msに設定されています。

デバウンス済み

更新回数: 0

使用方法

import { refDebounced } from '@vueuse/core'

const input = ref('foo')
const debounced = refDebounced(input, 1000)

input.value = 'bar'
console.log(debounced.value) // 'foo'

await sleep(1100)

console.log(debounced.value) // 'bar'

オプションの3番目のパラメータとしてmaxWaitオプションを含むこともできます。詳細は`useDebounceFn`を参照してください。

推奨読書

デバウンス vs スロットル: 決定的なビジュアルガイド

型宣言

typescript

/**
 * Debounce updates of a ref.
 *
 * @return A new debounced ref.
 */
export declare function refDebounced<T>(
  value: Ref<T>,
  ms?: MaybeRefOrGetter<number>,
  options?: DebounceFilterOptions,
): Readonly<Ref<T>>
export { refDebounced as useDebounce, refDebounced as debouncedRef }