vue.js页面中有多个input搜索框如何实现防抖操作

在vue.js页面中，当有多个input搜索框需要实现防抖操作时，可以使用以下方法：

1. 使用lodash库提供的_.debounce()函数。该函数可以将一些被频繁调用的函数在规定时间内只执行一次。将需要进行防抖的搜索函数作为debounce函数的参数即可。但是，如果页面中有多个搜索框需要实现防抖操作，每个搜索框都需要调用该debounce函数，代码重复，不够优雅。

2. 使用vue.js的mixin混入功能。将防抖操作的代码封装到一个mixin混入对象中，然后在需要的组件中配置该mixin，即可实现防抖操作。这种方法更加优雅，代码结构更加清晰。

下面是一个搜索组件的样例代码：

<template>
  <div>
    <input type="text" v-model="searchText" @input="debounceSearch"/>
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
import searchMixin from 'searchMixin.js'  // 引入定义好的mixin混入对象

export default {
  name: 'Search',
  mixins: [searchMixin],  // 在组件中引用该mixin
  data () {
    return {
      searchText: '',
      searchResults: [],
    }
  },
  methods: {
    search () {
      // 搜索逻辑
      this.searchResults = []
      if (this.searchText) {
        this.searchResults = [
          {id: 1, name: 'result1'},
          {id: 2, name: 'result2'},
          // ...
        ]
      }
    },
  },
  mounted () {
    console.log('search component mounted')
  }
}
</script>

searchMixin.js：

import _ from 'lodash'

export default {
  methods: {
    debounceSearch: _.debounce(function () {
      this.search()
    }, 500)
  }
}

在以上样例代码中，searchMixin.js中定义了一个防抖操作函数debounceSearch，将需要防抖的搜索函数search作为debounce函数的参数。组件中引用了该mixin，在input的@input事件中调用debounceSearch函数实现防抖操作。这样，当用户在搜索框中快速输入时，搜索函数search不会被频繁调用，而是在规定的时间间隔内只会执行一次，节省了系统资源，提高了性能。