使用customRef函数自定义一个ref

我们知道,ref函数可以创建一个响应式数据,在数据更新时同时更新UI界面
有的时候,我们希望可以显示的控制依赖追踪和触发响应,那就可以使用customRef函数自定义一个ref
自定义ref本质其实就是return customRef()
需要注意:
customRef函数接受一个工厂函数,该工厂函数有两个参数,分别是用于追踪的track与用于触发响应的trigger,并且返回一个的对象,该对象需要有getset方法

官方例子:使用自定义 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'),
    }
  },
}

如上代码,在get中显示调用track()表示该数据需要被追踪,在set中显示的调用trigger()表示当数据被修改时,需要更新UI界面。

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

参考文献:
https://vue-composition-api-rfc.netlify.app/zh/api.html#customref

You may also like...