技術標籤：vue總結vue

什麼是防抖？

 防抖就是對於頻繁觸發的事件新增一個延時同時設定一個最小觸發間隔，如果觸發間隔小於設定的間隔，則清除原來的定時，重新設定新的定時；如果觸發間隔大於設定間隔，則保留原來的定時，並設定新的定時；防抖的結果就是頻繁的觸發轉變為觸發一次

使用customRef實現防抖

<template>
  <div>
    <input type="text" name="" id="" v-model="keyword">
    <div>
 
{{keyword}}</div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, customRef } from "vue";
  function useDebouncedRef<T>(value: T,delay=200) {
      let timeout: number
      return customRef((track,trigger) => {
         return{
            get
 
(){
              //告訴vue追蹤資料
              track()
              return value
            },
            set(newValue: T){
              clearTimeout(timeout)
              timeout = setTimeout(() => {
                //更換資料
                value = newValue
                //告訴vue去觸發頁面更新
                trigger
 
()
              },delay)
          }
         }
      })
  }  
  export default defineComponent({
    name: "App",
    setup() {
      //第一個引數為設定keyword的初始值,第二個引數為延遲更新的時間
      const keyword = useDebouncedRef('aaa',500)
      return{
        keyword
      }
    },
  })
 
</script>

案例演示