customRef [ 實現防抖 ]

阿新 • • 發佈：2022-05-20

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>