vue实现防抖

在Vue中实现防抖可以使用以下两种方法：

1.使用Lodash库中的防抖函数

在Vue组件中引入Lodash库，并使用其提供的防抖函数来实现防抖效果。例如：

import _ from 'lodash'

export default {
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    // 使用Lodash库中的防抖函数
    debounceInput: _.debounce(function () {
      // 防抖后的处理逻辑
      console.log('debounce input:', this.inputValue)
    }, 500)
  }
}

在模板中监听输入框的输入事件，并调用防抖函数：

<template>
  <div>
    <input v-model="inputValue" @input="debounceInput" type="text">
  </div>
</template>

2.手动实现防抖函数

手动实现防抖函数需要在Vue组件中定义一个定时器和一个延迟时间，每次调用函数时清除定时器并重新设置定时器，来达到防抖的效果。例如：

export default {
  data () {
    return {
      inputValue: ''
    }
  },
  methods: {
    // 手动实现防抖函数
    debounceInput () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        // 防抖后的处理逻辑
        console.log('debounce input:', this.inputValue)
      }, 500)
    }
  }
}

在模板中监听输入框的输入事件，并调用防抖函数：

<template>
  <div>
    <input v-model="inputValue" @input="debounceInput" type="text">
  </div>
</template>