vue利用自定义ref实现防抖

封装一个js文件

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;
        }, duration);
      }
    }
  })
}

vue文件中使用

import { debounceRef } from './customRef.js'
const text = debounceRef('', 500)