用vue写一个防抖列子

当然可以！下面是一个使用 Vue 实现防抖功能的示例：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleInput" />
    <p>{{ debouncedValue }}</p>
  </div>
</template>

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      inputValue: '',
      debouncedValue: '',
    };
  },
  methods: {
    handleInput: debounce(function() {
      this.debouncedValue = this.inputValue;
    }, 500),
  },
};
</script>

在上面的示例中，我们首先导入了 `debounce` 函数，它来自于 Lodash 库。然后，我们在 `handleInput` 方法中使用了 `debounce` 函数，将其作为事件处理函数传递给 `@input` 事件。这样，当用户输入时，`handleInput` 方法会被触发，但是实际执行的是经过防抖处理后的函数。在这个示例中，防抖延迟时间设置为 500 毫秒。

当用户输入时，`handleInput` 方法会被调用，但是实际上只有在用户停止输入 500 毫秒后，才会更新 `debouncedValue` 的值。这样可以避免频繁触发事件处理函数，减少不必要的计算和网络请求。

这只是一个简单的示例，你可以根据实际需求进行修改和扩展。希望对你有帮助！如有更多问题，请随时提问。