Vue3利用自定义ref实现防抖功能

<script setup>
import { debounceRef } from './ref';
 
const text = debounceRef('',1000)
</script>
 
<template>
  <div>
    <input v-model="text">
  </div>
  
  <div>{{text}}</div>
</template>
 
<style scoped>
 
</style>

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

export function customRef<T>(factory: CustomRefFactory<T>): Ref<T> {
  return new CustomRefImpl(factory) as any
}
 
export type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void,
) => {
  get: () => T
  set: (value: T) => void
}

class CustomRefImpl<T> {
  public dep?: Dep = undefined
 
  private readonly _get: ReturnType<CustomRefFactory<T>>['get']
  private readonly _set: ReturnType<CustomRefFactory<T>>['set']
 
  public readonly __v_isRef = true
 
  constructor(factory: CustomRefFactory<T>) {
    const { get, set } = factory(
      () => trackRefValue(this),
      () => triggerRefValue(this),
    )
    this._get = get
    this._set = set
  }
 
  get value() {
    return this._get()
  }
 
  set value(newVal) {
    this._set(newVal)
  }
}

 
export function trackRefValue(ref: RefBase<any>) {
  if (shouldTrack && activeEffect) {
    ref = toRaw(ref)
    trackEffect(
      activeEffect,
      (ref.dep ??= createDep(
        () => (ref.dep = undefined),
        ref instanceof ComputedRefImpl ? ref : undefined,
      )),
      __DEV__
        ? {
            target: ref,
            type: TrackOpTypes.GET,
            key: 'value',
          }
        : void 0,
    )
  }
}

export function triggerRefValue(
  ref: RefBase<any>,
  dirtyLevel: DirtyLevels = DirtyLevels.Dirty,
  newVal?: any,
) {
  ref = toRaw(ref)
  const dep = ref.dep
  if (dep) {
    triggerEffects(
      dep,
      dirtyLevel,
      __DEV__
        ? {
            target: ref,
            type: TriggerOpTypes.SET,
            key: 'value',
            newValue: newVal,
          }
        : void 0,
    )
  }
}