Vue防抖节流

在Vue开发中，我们经常需要处理用户的交互行为，比如点击、滚动、输入等，这些操作可能会触发频繁的数据更新和页面渲染，导致性能问题。为了解决这个问题，我们可以使用防抖和节流技术来控制事件触发的频率。

什么是防抖？

防抖是指在事件被触发n秒后再执行回调函数，如果在这n秒内又有该事件的触发，则重新开始计时。换句话说，当用户连续触发同一事件时，只有最后一次触发会生效。

防抖的应用场景比较多，比如搜索框输入时的实时查询、按钮点击防止重复提交等。

下面是一个Vue组件中使用防抖的示例代码：

复制代码
<template>
  <div>
    <input type="text" v-model="keyword" @input="handleInput">
    <ul>
      <li v-for="item in searchResult">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    }
  },
  methods: {
    handleInput: _.debounce(function() {
      // 发送异步请求获取搜索结果
      fetch('/search?key=' + this.keyword)
        .then(response => response.json())
        .then(data => {
          this.searchResult = data;
        })
    }, 500)
  }
}
</script>

在上面的代码中，我们使用了Lodash库提供的debounce函数来实现防抖。该函数接收一个回调函数和延迟时间作为参数，返回一个新函数。当新函数被连续调用时，会先清除之前的计时器，再重新设置计时器，以达到延迟执行回调函数的目的。

什么是节流？

节流是指连续触发事件时，在一定时间间隔内只执行一次回调函数。换句话说，当用户连续触发同一事件时，每隔一段时间才会执行一次。

节流的应用场景比较多，比如滚动加载数据、窗口缩放等。

下面是一个Vue组件中使用节流的示例代码：

复制代码
<template>
  <div>
    <ul>
      <li v-for="item in dataList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll: _.throttle(function() {
      // 判断是否滚动到底部并加载更多数据
      if (this.isBottom()) {
        fetch('/data?page=' + this.pageNum)
          .then(response => response.json())
          .then(data => {
            this.dataList = this.dataList.concat(data);
            this.pageNum++;
          })
      }
    }, 500)
  }
}
</script>

在上面的代码中，我们使用了Lodash库提供的throttle函数来实现节流。该函数接收一个回调函数和时间间隔作为参数，返回一个新函数。当新函数被连续调用时，会判断当前时间是否达到时间间隔，如果是，则执行回调函数。

总结

防抖和节流都是常用的性能优化技术，在Vue开发中也经常使用。它们可以有效减少不必要的数据更新和页面渲染，提高用户体验和网站性能。