• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • customRef()

    创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收tracktrigger函数作为参数,并应返回一个带有getset的对象。

    使用v-model使用自定义 ref 实现debounce的示例:

    //HTML
    <input v-model="text" />
    
    //JS
    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)
          }
        }
      })
    }
    
    export default {
      setup() {
        return {
          text: useDebouncedRef('hello')
        }
      }
    }
    

    Typing:

    function customRef <T>(factory: CustomRefFactory<T>): Ref<T>
    
    type CustomRefFactory <T> = (
    		track: () => void,
    		trigger: () => void
    	) => {
    		get: () => T
    		set: (value: T) => void
    	}
    

    上篇:reactive()

    下篇:shallowRef()