Vue3 usa customRef para implementar anti-vibración

Cuando el usuario hace clic con frecuencia en el botón de solicitud, podemos usar el método antivibración para evitar que envíe solicitudes al backend todo el tiempo.

customRef es una función de fábrica que requiere que devolvamos un objeto e implementemos get y set, adecuado para antivibración y similares.

haga clic en el botón

<template>
  <hr>
  <div>
    {
   
   { name }}
  </div>
  <hr>
  <button @click="change">修改 customRef</button>
 
</template>
 
<script setup lang='ts'>
import { ref, customRef } from 'vue'
 
function myRef<T = any>(value: T) {
  let timer:any;
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newVal) {
        clearTimeout(timer)
        timer =  setTimeout(() => {
          console.log('触发了set')
          value = newVal
          trigger()
        },500)
      }
    }
  })
}
 
 
const name = myRef<string>('修改前')
 
 
const change = () => {
  name.value = '修改后'
}
 
</script>
<style scoped>
</style>