利用自定义ref实现防抖

利用自定义ref实现防抖

import { customRef } from 'vue'

export function debounceRef(value, delay = 1000) {
  let timer
  return customRef((track, trigger) => {
    return {
      get() {
        track() //收集依赖
        return value
      },
      set(val) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          trigger() //通知依赖
          value = val
        }, delay)
      }
    }
  })
}

使用

和ref的使用方法一样，导入，然后包裹数据

import { customRef } from 'customRef .js'
const val=customRef(0)

效果

假如延迟时间给的1000毫秒，当数据发生变化后，数据会在一秒后才会变化