Vue 防抖节流 详细介绍（面试常客、去繁从简，2024年最新自学web前端书籍推荐

防抖（debounce）和节流（throttle）是常用的性能优化手段，用以控制函数的执行频率，以减少计算资源的使用，提升用户体验。

防抖：指的是在一定时间内，只执行最后一次函数调用。常用于文本框输入时，只在用户停止输入一段时间后，再执行查询或提交操作。

节流：指的是在一定时间内，只执行第一次和最后一次函数调用。常用于窗口大小调整、滚动条滑动等高频事件，以减少计算资源的浪费。

Vue中实现防抖和节流的方法：

1. 自定义指令实现：

防抖：

Vue.directive('debounce', {
  bind(el, binding) {
    let timeout = null;
    el.addEventListener('input', () => {
      if (timeout !== null) clearTimeout(timeout);
      timeout = setTimeout(() => {
        binding.value();
      }, 300); // 延迟300ms执行
    });
  }
});

节流：

Vue.directive('throttle', {
  bind(el, binding) {
    let timeout = null;
    el.addEventListener('input', () => {
      if (!timeout) {
        timeout = setTimeout(() => {
          binding.value();
          timeout = null;
        }, 300); // 延迟300ms执行
      }
    });
  }
});

2. 使用第三方库lodash：

import { debounce, throttle } from 'lodash';
 
export default {
  methods: {
    // 防抖
    onInputDebounce: debounce(function() {
      // 实际要执行的代码
    }, 300),
 
    // 节流
    onInputThrottle: throttle(function() {
      // 实际要执行的代码
    }, 300)
  }
};

在Vue模板中使用：

<input v-debounce="onInputDebounce" />
<input v-throttle="onInputThrottle" />

在实际应用中，根据具体场景选择合适的防抖或节流策略，并通过自定义指令或第三方库的方式进行封装，以提高代码的可复用性和可维护性。