Skip to content

refDebounced

类别
导出体积
451 B
上次更改
3 days ago
别名
useDebouncedebouncedRef
相关

对 ref 的更新进行防抖。

示例

此演示设置了 1000ms 的延迟。

Debounced:

更新次数: 0

用法

ts
import { 
refDebounced
} from '@vueuse/core'
import {
shallowRef
} from 'vue'
const
input
=
shallowRef
('foo')
const
debounced
=
refDebounced
(
input
, 1000)
input
.
value
= 'bar'
console
.
log
(
debounced
.
value
) // 'foo'
await
sleep
(1100)
console
.
log
(
debounced
.
value
) // 'bar'

一个带有对象引用的示例。

js
import { refDebounced } from '@vueuse/core'
import { shallowRef } from 'vue'

const data = shallowRef({
  name: 'foo',
  age: 18,
})
const debounced = refDebounced(data, 1000)

function update() {
  data.value = {
    ...data.value,
    name: 'bar',
  }
}

console.log(debounced.value) // { name: 'foo', age: 18 }
update()
await sleep(1100)

console.log(debounced.value) // { name: 'bar', age: 18 }

你也可以传递一个可选的第三个参数,包括 maxWait 选项。详情请参阅 useDebounceFn

推荐阅读

类型声明

ts
export type 
RefDebouncedReturn
<
T
= any> =
Readonly
<
Ref
<
T
>>
/** * 对 ref 的更新进行防抖。 * * @return 一个新的防抖 Ref */ export declare function
refDebounced
<
T
>(
value
:
Ref
<
T
>,
ms
?:
MaybeRefOrGetter
<number>,
options
?:
DebounceFilterOptions
,
):
RefDebouncedReturn
<
T
>
/** @deprecated use `refDebounced` instead */ export declare const
debouncedRef
: typeof
refDebounced
/** @deprecated use `refDebounced` instead */ export declare const
useDebounce
: typeof
refDebounced

源码

源码演示文档

贡献者

一纸忘忧
Anthony Fu
IlyaL
Anthony Fu
Vida Xie
SerKo
IlyaL
Robin
Thimo Sietsma
Dominik Klein

更新日志

e5f74 - feat!: deprecate alias exports in favor of original function names (#5009)
c1d6e - feat(shared): ensure return types exists (#4659)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)