Vue 利用自定义ref实现防抖

利用vue提供的api【 customRef】实现函数防抖

实现

import { customRef } from 'vue'

export function debounceRef(value, delay = 500) {
  let timer
  return customRef((track, trigger) => {
    return {
      get() {
        // 依赖收集 track()
        track()
        return value
      },
      set(val) {
        clearTimeout(timer)
        // 派发更新 trigger()
        timer = setTimeout(() => {
          value = val
          trigger()
        }, delay)
      },
    }
  })
}

使用