在 Vue 2 中优雅地实现防抖：提升性能的最佳实践

2024-04-06 11:10:41

在 Vue 2 中优雅地实现防抖

问题

在繁忙的 Web 应用程序中，用户输入可能很频繁，导致多次重新渲染。防抖是一种技术，它可以合并快速重复的事件，避免不必要的计算和渲染，从而提高性能。虽然 Vue 2 中已弃用 debounce 属性，但可以通过结合第三方库或使用内置 JavaScript 函数来实现防抖功能。

解决方案

使用 Lodash 库：

Lodash 提供了一个功能强大的 debounce 函数，易于集成到 Vue 2 中：

import { debounce } from 'lodash';

export default {
  data() {
    return {
      searchInput: '',
      filterKey: ''
    }
  },
  methods: {
    debounceInput: debounce(function () {
      this.filterKey = this.searchInput;
    }, 500)
  }
}

使用 JavaScript 内置函数：

JavaScript 的 setTimeout 函数可以实现防抖：

export default {
  data() {
    return {
      searchInput: '',
      filterKey: '',
      timeoutId: null
    }
  },
  methods: {
    debounceInput: function () {
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }

      this.timeoutId = setTimeout(() => {
        this.filterKey = this.searchInput;
      }, 500);
    }
  }
}

利用 v-model 指令：

在某些情况下，可以使用 v-model 指令来实现防抖，而无需额外的变量或第三方库：

export default {
  data() {
    return {
      searchInput: ''
    }
  },
  computed: {
    filterKey: {
      get() {
        return this.searchInput;
      },
      set(value) {
        setTimeout(() => {
          this.searchInput = value;
        }, 500);
      }
    }
  }
}