vue 自带的防抖节流

Vue自带的防抖节流指的是在Vue组件中使用`debounce`和`throttle`修饰符来实现防抖和节流的效果。

防抖（Debounce）是指在事件触发后，等待一段时间后再执行相关操作。如果在这段时间内又触发了同样的事件，则重新计时。Vue中使用`v-debounce`修饰符来实现防抖功能，例如：

<input type="text" v-model="keyword" v-debounce:500="search" />

上述代码中，输入框的值绑定到了`keyword`属性，当用户输入内容时，会触发`search`方法。`v-debounce:500`表示在用户输入停止后等待500毫秒才会执行`search`方法。

节流（Throttle）是指在事件触发后，一段时间内只执行一次相关操作。Vue中使用`v-throttle`修饰符来实现节流功能，例如：

<button v-throttle:1000="handleClick">点击按钮</button>

上述代码中，当用户点击按钮时，会触发`handleClick`方法。`v-throttle:1000`表示在1秒内只执行一次`handleClick`方法。

需要注意的是，Vue自带的防抖节流功能是基于Lodash库实现的，所以在使用前需要确保已经引入了Lodash库。

相关问题

模拟百度输入框封装一个输入框组件，要求自带防抖及节流功能，能实时显示输入字段的查询结果

以下是一个简单的实现：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleInput" />
    <ul v-if="showResults">
      <li v-for="(result, index) in results" :key="index">{{ result }}</li>
    </ul>
  </div>
</template>

<script>
import debounce from 'lodash.debounce';
import throttle from 'lodash.throttle';

export default {
  data() {
    return {
      inputValue: '',
      results: [],
      showResults: false,
    };
  },
  methods: {
    handleInput: debounce(function() {
      this.showResults = true;
      const query = this.inputValue.trim();
      if (query === '') {
        this.results = [];
        this.showResults = false;
        return;
      }
      // 此处为模拟查询结果
      this.results = ['结果1', '结果2', '结果3'].filter(result =>
        result.includes(query),
      );
    }, 300),
    handleInputThrottled: throttle(function() {
      // 可选节流函数
    }, 500),
  },
};
</script>

该组件引入了 `lodash` 库中的 `debounce` 和 `throttle` 函数来实现防抖和节流功能。`handleInput` 方法使用 `debounce` 包装，以确保用户输入停顿一段时间后才会触发查询。`handleInputThrottled` 方法使用 `throttle` 包装，以确保在一定时间内只会执行一次，以避免过度频繁的查询。你可以根据实际需求选择使用其中一个或两个函数。组件的 `results` 数据项存储查询结果，`showResults` 控制是否显示结果列表。在实现中，当用户输入为空时，将隐藏结果列表。