vue使用lodash节流防抖

在Vue中使用lodash来实现节流和防抖的方法如下：

1. 安装lodash库：在项目根目录下打开命令行工具，执行以下命令安装lodash库：

npm install lodash

2. 导入lodash库：在需要使用节流和防抖的组件中，导入lodash库的相关函数：

import { debounce, throttle } from 'lodash';

3. 使用节流函数：使用`throttle`函数来实现节流。`throttle`函数会在指定的时间间隔内只执行一次函数，可以用于限制频繁触发的事件，例如滚动、拖拽等。以下是一个使用节流函数的示例：

export default {
  data() {
    return {
      scrollHandler: null
    };
  },
  methods: {
    handleScroll() {
      // 处理滚动事件的逻辑
      console.log('Scroll event');
    }
  },
  mounted() {
    this.scrollHandler = throttle(this.handleScroll, 200); // 设置节流时间为200ms
    window.addEventListener('scroll', this.scrollHandler);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrollHandler);
  }
}

在上述代码中，使用`throttle`函数将`handleScroll`方法包装起来，设置节流时间为200ms。在组件的`mounted`生命周期钩子中，将节流后的处理函数添加到`scroll`事件监听器中，保证在指定时间间隔内只执行一次。

4. 使用防抖函数：使用`debounce`函数来实现防抖。`debounce`函数会在指定的时间间隔后执行函数，如果在这个时间间隔内又触发了同样的函数，则重新计时。以下是一个使用防抖函数的示例：

export default {
  data() {
    return {
      inputHandler: null,
      inputValue: ''
    };
  },
  methods: {
    handleInput() {
      // 处理输入事件的逻辑
      console.log('Input event');
    }
  },
  mounted() {
    this.inputHandler = debounce(this.handleInput, 500); // 设置防抖时间为500ms
  }
}

在上述代码中，使用`debounce`函数将`handleInput`方法包装起来，设置防抖时间为500ms。在组件的`mounted`生命周期钩子中，将防抖后的处理函数赋值给`inputHandler`。

在模板中，将防抖处理函数绑定到相应的事件上：

<input type="text" v-model="inputValue" @input="inputHandler">

这样，在输入框输入内容时，只有在500ms内没有再次输入才会触发防抖后的处理函数。