Использование защиты от сотрясений в Vue2

import {
    
     debounce } from 'lodash-es'

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

Однако этот подход проблематичен для повторно используемых компонентов, потому что предварительно стабилизированная функция имеет состояние: она поддерживает внутреннее состояние во время выполнения. Если несколько экземпляров компонентов используют одну и ту же предустановленную функцию защиты от сотрясений, они будут влиять друг на друга.

Чтобы функция защиты от сотрясений каждого экземпляра компонента была независимой друг от друга, мы можем вместо этого создать эту функцию предварительной обработки в созданном хуке жизненного цикла:

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