通过vue封装防抖和节流

在Vue中，可以通过封装防抖和节流函数来优化页面性能和用户体验。防抖和节流都是为了限制函数的执行频率，避免频繁触发函数而导致性能问题。

1. 防抖（Debounce）：在指定的时间间隔内，如果事件持续触发，则重新计时，直到事件停止触发后才执行函数。常用于输入框搜索、窗口调整等场景。

下面是一个通过Vue封装防抖函数的示例：

// 防抖函数
function debounce(func, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

// Vue组件中使用防抖函数
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput: debounce(function() {
      // 处理输入事件
      // ...
    }, 300)
  }
}

2. 节流（Throttle）：在指定的时间间隔内，只执行一次函数。常用于滚动加载、按钮点击等场景。

下面是一个通过Vue封装节流函数的示例：

// 节流函数
function throttle(func, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// Vue组件中使用节流函数
export default {
  data() {
    return {
      scrollPosition: 0
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll: throttle(function() {
      // 处理滚动事件
      // ...
    }, 300)
  }
}