useThrottleWatch

useThrottleWatch 跟watch类似,可以控制函数在多次触发的节流。

基础用法


<template>
    <div>Hello World! {{count}}</div>
    <button @click="count++">Add</button>
  </template>
  
  <script setup lang="ts">
  import { ref } from "vue";
  const count = ref<number>(0);
  import { useThrottleWatch } from "hooks-vue3";
  useThrottleWatch(
    count,
    (newVal, oldVale) => {
      console.log("newVal", newVal, oldVale);
    },
    {
      wait: 1000,
    }
  );
  </script>

API

useThrottleWatch(count,callback,options);

参数TS类型


import type { ThrottleSettings } from 'lodash-es';
import type {
  WatchCallback,
  WatchOptions,
  WatchSource,
  WatchStopHandle,
} from 'vue';
export interface DebounceOptions extends ThrottleSettings {
  wait?: number;
}

function useThrottleWatch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: WatchCallback<T>,
  options?: WatchOptions<Immediate> & DebounceOptions,
): WatchStopHandle

Last updated