vue3+ts 实现防抖功能

使用自定义 ref 实现带防抖功能的 v-model

import { customRef } from 'vue'
export function useDebouncedRef<T>(value: T, delay = 200) {
  let timeout: any = null
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: T) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

//使用
export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}
<input v-model="text" />