customRef [ 实现防抖 ]

customRef [ 实现防抖 ] 

• 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

案例 : 

<template>
    <div>
      <input type="text" v-model="num">  <br><br><br>
      {{num}}
    </div>
</template>

<script>
    import { ref ,customRef}    from 'vue'
    export default {
        name: 'App',
        setup() {
      // let num = ref(0)
      // 自定义了一个ref:取名为myref
      let num = myref(0)

      // 这里不能用箭头函数
      function myref(value){
        // 返回一个自定义ref的 [customRef(vue定义的) : 有两个值 ]
        // track() : 通知Vue追踪value的变化
        // trigger() : 通知vue重新解析模板                
        return customRef((track,trigger)=>{
          // 自定义ref函数customRef需要返回一个对象
          return {
            // 读取的时候,调用
            get(){
              track() //通知Vue追踪value的变化
              return value;
            },
            // 改变的时候调用,newValue : 是你改变的值
            set(newValue){              
              value = newValue
              // 改了值,那你还需要去重新解析一下模板,不然不会动
              // 所以需要去调用 trigger(),但是调用了,get不同意换,需要再加track()
              console.log(value)
              trigger() //通知vue重新解析模板
            }
          }
        })
      }

      return{
        num
      }
        }
    }
</script>

案例 : 升级延迟0.5秒再变化,就不太好了,需要升级

<template>
    <div>
      <input type="text" v-model="num">  <br><br><br>
      {{num}}
    </div>
</template>

<script>
    import { ref ,customRef}    from 'vue'
    export default {
        name: 'App',
        setup() {
      // let num = ref(0)
      // 自定义了一个ref:取名为myref
      let num = myref(0)

      // 这里不能用箭头函数
      function myref(value){
        // 返回一个自定义ref的 [customRef(vue定义的) : 有两个值 ]
        // track() : 通知Vue追踪value的变化
        // trigger() : 通知vue重新解析模板                
        return customRef((track,trigger)=>{
          // 自定义ref函数customRef需要返回一个对象
          return {
            // 读取的时候,调用
            get(){
              track() //通知Vue追踪value的变化
              return value;
            },
            // 改变的时候调用,newValue : 是你改变的值
            set(newValue){              
              setTimeout(()=>{
                value = newValue
                // 改了值,那你还需要去重新解析一下模板,不然不会动
                // 所以需要去调用 trigger(),但是调用了,get不同意换,需要再加track()
                console.log(value)
                trigger() //通知vue重新解析模板
              },500)
            }
          }
        })
      }

      return{
        num
      }
        }
    }
</script>

案例 : 升级防抖

<template>
    <div>
      <input type="text" v-model="num">  <br><br><br>
      {{num}}
    </div>
</template>

<script>
    import { ref ,customRef}    from 'vue'
    export default {
        name: 'App',
        setup() {
      // let num = ref(0)
      // 自定义了一个ref:取名为myref
      let num = myref(0)

      // 这里不能用箭头函数
      function myref(value){
        // 防抖
        let timer

        // 返回一个自定义ref的 [customRef(vue定义的) : 有两个值 ]
        // track() : 通知Vue追踪value的变化
        // trigger() : 通知vue重新解析模板                
        return customRef((track,trigger)=>{
          // 自定义ref函数customRef需要返回一个对象
          return {
            // 读取的时候,调用
            get(){
              track() //通知Vue追踪value的变化
              return value;
            },
            // 改变的时候调用,newValue : 是你改变的值
            set(newValue){  
              clearTimeout(timer)          
              timer = setTimeout(()=>{
                value = newValue
                // 改了值,那你还需要去重新解析一下模板,不然不会动
                // 所以需要去调用 trigger(),但是调用了,get不同意换,需要再加track()
                console.log(value)
                trigger() //通知vue重新解析模板
              },500)
            }
          }
        })
      }

      return{
        num
      }
        }
    }
</script>