快捷導(dǎo)航

Vue3利用自定義ref實現(xiàn)防抖功能

更新時間：2024年05月28日 10:44:40 作者：叫我阿東就行

在Vue3中,ref提供了訪問組件內(nèi)DOM元素和子組件實例的方法,防抖是一種限制函數(shù)調(diào)用頻率的方法,即在一定時間內(nèi)多次觸發(fā)同一個函數(shù),只執(zhí)行最后一次觸發(fā)的函數(shù),本文將給大家介紹了Vue3如何利用自定義ref實現(xiàn)防抖,需要的朋友可以參考下

debounceRef(value,delay)

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(()=>{
                //派發(fā)更新
                trigger()
                value = val 
            },delay)
            
        }
    }))
}

函數(shù)接收兩個參數(shù)：

第一個參數(shù)，綁定的值。

第二個參數(shù)，想要延遲多少秒更新

我們利用了vue內(nèi)部提供的一個實現(xiàn)自定義ref的函數(shù)，該函數(shù)接收一個工廠函數(shù)，該函數(shù)必須返回一個對象，其中包含get和set函數(shù)

customRef()源碼

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
}

CustomRefImpl源碼

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)
  }
}

CustomRefImpl類中主要做了兩件事，依賴收集trackRefValue和派發(fā)更新triggerRefValue。

trackRefValue()

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

triggerRefValue()

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