vue中节流函数

在Vue中实现节流函数可以使用lodash库提供的debounce函数。

首先需要安装lodash库，可以通过以下命令安装：

npm install lodash

然后在需要使用节流函数的组件中引入lodash库：

import { debounce } from 'lodash';

export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    // 使用节流函数
    handleInput: debounce(function() {
      // 处理输入事件
      console.log('input value:', this.inputValue);
    }, 300),
  }
}

在上述代码中，我们使用了debounce函数来创建一个节流函数handleInput。这个函数会在最后一次调用后的300毫秒内不会再次调用。

在输入事件发生时，handleInput函数会被触发，但是如果在300毫秒内再次触发输入事件，handleInput函数不会执行，直到300毫秒后最后一次输入事件触发时才会执行。

这样可以有效减少频繁触发函数的次数，提升性能。