customRef

425 阅读1分钟
function useCustomRef(value, delay){
  let timeout
  // 创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收 track 和 trigger 函数作为参数,并且应该返回一个带有 get 和 set 的对象。
  return customRef((track, trigger)=>{
    return {
      get(){
        track();
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(()=>{
          value = newValue;
          trigger()
        },delay)
      }
    }
  })
}
export default {
  name: 'Count',
  setup() {
    return {text: useCustomRef('hello vue3.0', 200)}
  }
};