浅析Vue 防抖与节流的使用

当我们在使用 Vue.js 开发 Web 应用时，我们经常会碰到需要处理频繁触发的事件或异步请求的需求，例如输入框连续输入、窗口 resize 等，这些事件的频繁触发可能会导致应用程序的性能问题。在这种情况下，我们可以使用防抖和节流来限制这些事件的触发次数，以优化应用程序的性能。

什么是防抖和节流

防抖和节流都是关于限制事件触发次数的技术。

防抖（Debounce）

当某个事件被频繁触发时，使用防抖技术可以限制事件的触发次数，从而减少一些不必要的计算或请求。具体来讲，防抖的思路是在某个事件被触发后，延迟一段时间再去执行这个事件的处理函数，如果在这段时间内，同一个事件被触发多次，那么就重新计时。

举个例子，当用户在输入框输入关键字时，我们可以使用防抖技术来处理。当用户输入一个字母之后，如果我们直接根据这个字母发起一个查询请求，那可能会导致频繁查询、频繁渲染的问题，影响程序性能。我们可以将查询请求包装在一个防抖函数中，设置一个延迟时间，当用户停止输入一段时间之后，再去发起查询请求。

节流（Throttle）

和防抖不同，节流是指在某个事件被频繁触发时，间隔一段时间执行一次事件处理函数。和防抖一样，节流技术也可以减少一些不必要的计算或请求，提高应用程序的性能。

对于一些频繁触发的事件，我们可以使用节流技术来提升性能，比如窗口 resize、scroll 等。在这类事件中，如果我们每次触发事件都立即执行事件处理函数，那么可能会导致频繁重新渲染，影响性能。我们可以将事件处理函数间隔一定时间执行，从而减少重新渲染的频率。

如何使用防抖和节流

Vue.js 提供了许多内置指令和生命周期钩子，可以很方便地使用防抖和节流。下面是两个常用的示例：

防抖示例

<template>
  <div>
    <input type="text" v-model="keyword" @input="handleSearch">
    <ul>
      <li v-for="item in searchResult">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    }
  },
  methods: {
    handleSearch: _.debounce(function() {
      // 发起查询请求并更新搜索结果
      // 使用 Lodash 的 _.debounce 方法，设置查询请求延迟 500ms
    }, 500)
  }
}
</script>

在上面的代码中，我们使用了 Lodash 的 .debounce 方法来实现防抖功能。当用户输入一个关键字之后，会触发 @input 事件，然后执行 handleSearch 方法。在 handleSearch 方法中，我们将查询请求包装在 .debounce 方法中，设置 500ms 的延迟时间。如果用户在 500ms 内再次输入，那么 _.debounce 方法会重新计时，直到用户停止输入 500ms 后才会发起查询请求。

节流示例

<template>
  <div v-on:resize.window="handleResize"></div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: 0
    }
  },
  mounted() {
    // 初始化 windowWidth
    this.handleResize()
  },
  methods: {
    handleResize: _.throttle(function() {
      this.windowWidth = window.innerWidth
    }, 1000)
  }
}
</script>

在上面的代码中，我们使用了 Vue.js 提供的 v-on 指令和 .throttle 方法来实现节流功能。当窗口大小发生变化时，会触发 resize 事件，然后执行 handleResize 方法。在 handleResize 方法中，我们使用 .throttle 方法，将更新窗口宽度的代码包装在其中，设置 1000ms 的间隔时间，从而实现对窗口 resize 事件的节流处理。

总结

防抖和节流是 Web 开发中重要的性能优化技术，在 Vue.js 中也有很好的支持。有了防抖和节流，我们可以很方便地解决一些频繁触发的事件的性能问题。