Vue3中自定义Ref的妙用useCustomRef

自定义Ref通过useCustomRef实现，接受一个函数，函数接受track和trigger让我们手动控制什么时候收集和触发依赖。（也就是说当我们想自己控制依赖触发的时机时，使用该API很nice）

数据校验

    function useCustomRef(initValue:string){
        return customRef((track, trigger) => {
            return {
                get() {
                    track()
                    return initValue
                },
                set(value) {
                    if (/^\d+$/.test(value)) {
                        initValue = value
                        trigger()
                    }
                },
            }
        })
    }

防抖

import { customRef } from 'vue'

export function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

数据格式化

    function useCustomRef(initValue:string){
        return customRef((track, trigger) => {
            return {
                get() {
                    track()
                    return initValue.trim()//这里做任意格式化操作即可。
                },
                set(value) {
                    if (/^\d+$/.test(value)) {
                        initValue = value
                        trigger()
                    }
                },
            }
        })
    }