使用customRef函数自定义一个ref

6 min read

显示的控制依赖追踪和触发响应，那就可以使用customRef函数自定义一个ref

自定义ref本质其实就是return customRef()

customRef函数接受一个工厂函数，该工厂函数有两个参数，分别是用于追踪的track与用于触发响应的trigger,并且返回一个的对象，该对象需要有get和set方法

官方例子：使用自定义 ref 实现带防抖功能的 v-model ：


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

使用customRef函数自定义一个ref函数的步骤

  1. 函数返回customRef()
  2. customRef接受两个参数track和trigger
  3. customRef返回一个对象
  4. customRef返回的对象必须实现set和get方法
  5. 在get中显示调用track()表示该数据需要被追踪，在set中显示的调用trigger()表示当数据被修改时，需要更新UI界面