如何在Vue中使用debouce防抖函数

当我们在Vue组件中使用一些高频操作时，例如input事件的实时搜索，我们会发现输入一个字母就会发送一次请求，导致不必要的请求和资源浪费，这时候可以通过引入debounce防抖函数进行优化。下面是关于在Vue中使用debounce防抖函数的完整攻略：

1. 安装lodash

debounce函数通常是使用lodash库中的_.debounce函数来实现的，因此需要先安装lodash。

npm install lodash --save

2. 引入lodash

在需要使用debounce函数的vue组件中，导入lodash。

import _ from 'lodash';

3. 声明debounce函数

在vue组件的methods中声明debounce函数，将需要防抖的方法作为该函数的参数。

export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    search: _.debounce(function() {
      // 执行搜索操作
    }, 500)
  }
}

以上代码表示在Vue组件中声明了一个名为search的方法，该方法会使用debounce函数对其进行包装，延迟500毫秒执行方法。这里使用500毫秒作为delay的值，可以根据实际需求进行调整。

4. 绑定input事件

将search方法绑定到input事件上。

<template>
  <input type="text" v-model="searchText" @input="search"/>
</template>

以上代码表示将用户在输入框中输入的值与searchText变量进行双向绑定，同时将search方法绑定至input事件上。

示例说明

下面通过两个示例来说明如何在Vue中使用debounce防抖函数。

示例1：实时搜索

在这个示例中，我们来实现一个简单的搜索功能，在用户输入关键词后延迟500毫秒进行请求。

<template>
  <div>
    <input type="text" v-model="searchText" @input="search"/>
    <ul>
      <li v-for="item in searchResult" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  import _ from 'lodash';
  export default {
    data() {
      return {
        searchText: '',
        searchResult: []
      }
    },
    methods: {
      search: _.debounce(function() {
        if (this.searchText === '') {
          this.searchResult = []
          return;
        }
        // 通过fetch等方式获取后端接口数据
        fetch(`/api/search?keyword=${this.searchText}`)
          .then(res => res.json())
          .then(data => {
            this.searchResult = data.result
          })
      }, 500)
    }
  }
</script>

以上代码表示用户在输入框中输入关键词后，会发送一个延迟500毫秒的请求，将得到的搜索结果渲染在页面上。

示例2：窗口大小变化

在这个示例中，我们来实现一个窗口大小变化时的debounce操作。

<template>
  <p>当前窗口宽度：{{ windowWidth }}px</p>
</template>

<script>
  import _ from 'lodash';
  export default {
    data() {
      return {
        windowWidth: window.innerWidth
      }
    },
    mounted() {
      window.addEventListener('resize', this.handleResize)
    },
    methods: {
      handleResize: _.debounce(function() {
        this.windowWidth = window.innerWidth
      }, 500)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize)
    }
  }
</script>

以上代码表示在组件加载成功之后，注册了resize事件。在resize事件触发时，会进行debounce操作，延时500毫秒去更新窗口宽度。

通过以上两个示例的说明，我们可以了解到如何在Vue中使用debounce防抖函数，其实就是在methods中声明防抖函数，将需要进行防抖操作的函数作为参数传入，最后将防抖函数绑定到具体事件上即可。