使用customRef函数自定义一个ref

我们知道，ref函数可以创建一个响应式数据，在数据更新时同时更新UI界面
有的时候，我们希望可以显示的控制依赖追踪和触发响应，那就可以使用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'),
    }
  },
}

如上代码，在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