Vue 2.x utiliza anti-vibración en componentes

1. Declare la función anti-vibración

  Debounce(fn, t){
    
    
      let delay = t || 500;
      let timer = null;
      return function () {
    
    
          if (timer) {
    
    
              clearTimeout(timer);
          }
          timer = setTimeout(() => {
    
    
              fn.apply(this, arguments);
          }, delay);
      }
  }

2. Introducir la función anti-vibración

import {
    
    Debounce} from '@/utils/common.js'

3. Utilice la función anti-vibración

<template>
  <div class="about">
    <Input @on-change="handlerChange"></Input>
  </div>
</template>
<script>
import {
    
    Debounce} from '@/utils/common.js'
export default {
    
    
 methods:{
    
    
   handlerChange:Debounce(function(val){
    
    //val 为handlerChange函数的参数
     //业务代码
   })
 }
}
</script>

Nota: La función de devolución de llamada en Debounce no puede usar una función de flecha, porque la función de flecha hará que el interno this apunte al this de la capa de métodos, lo que hace que esto no apunte a la instancia de vue, lo que significa que this.xxx no está definido.