Usando antivibración en Vue2

import {
    
     debounce } from 'lodash-es'

export default {
    
    
  methods: {
    
    
    // 使用 Lodash 的防抖函数
    click: debounce(function () {
    
    
      // ... 对点击的响应 ...
    }, 500)
  }
}

Sin embargo, este enfoque es problemático para los componentes reutilizables, porque la función preestabilizada tiene estado: mantiene un estado interno en tiempo de ejecución. Si varias instancias de componentes comparten la misma función antivibración preestablecida, se afectarán entre sí.

Para mantener la función anti-vibración de cada instancia de componente independiente entre sí, podemos crear esta función de pre-vibración en el enlace del ciclo de vida creado:

export default {
    
    
  created() {
    
    
    // 每个实例都有了自己的预置防抖的处理函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    
    
    // 最好是在组件卸载时
    // 清除掉防抖计时器
    this.debouncedClick.cancel()
  },
  methods: {
    
    
    click() {
    
    
      // ... 对点击的响应 ...
    }
  }
}