自定义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() } }, } }) }