useDebounce()

通过防抖延迟参数的更新。

当参数可能快速变化时（例如输入联想字段），可用于避免频繁发送网络请求。

提示

useDebounce() 返回 ref，因此防抖后的值可以直接传给其他 composable 或组件。从输入发生变化的那一刻起直到防抖后的值更新为止，isPending 都为 true。

用法

IssueQuery

IssueList.vue

SearchIssues.vue

<script setup lang="ts">
  import { ref } from 'vue';
  import { useDebounce } from '@data-client/vue';
  import IssueList from './IssueList.vue';

  const query = ref('');
  // highlight-next-line
  const [debouncedQuery, isPending] = useDebounce(query, 200);
</script>

<template>
  <TextInput
    spellcheck="false"
    placeholder="Search react issues"
    v-model="query"
    :loading="isPending"
    autofocus
    size="large"
  >
    <SearchIcon />
  </TextInput>
  <Suspense>
    <IssueList :query="debouncedQuery" owner="facebook" repo="react" />
    <template #fallback><Loading /></template>
  </Suspense>
</template>

类型

function useDebounce<T>(
  value: T | Ref<T>,
  delay: number,
  updatable?: boolean | Ref<boolean>,
): [Ref<T>, Ref<boolean>];

value 和 updatable 可以是普通值，也可以是 ref。返回由 ref 组成的元组 [debouncedValue, isPending]。当 updatable 为 false 时，防抖后的值会停止更新，isPending 也会重置为 false。