Vue 3 Composition API 的防抖搜索框：优化输入体验，避免过度搜索

2023-09-08 00:19:15

Vue 3 Composition API 的防抖搜索框

随着 Vue 3 中 Composition API 的引入，我们有了编写响应式逻辑的新方法，即 ref 和 reactive 方法。在本文中，我们将展示如何创建一个防抖的 ref，该 ref 将在指定的延迟后才更新值。

例如，我们有一个搜索输入框，当用户输入时，我们需要触发搜索请求。然而，如果用户输入速度很快，则可能会在短时间内触发大量搜索请求，这可能会导致性能问题。

为了解决这个问题，我们可以使用防抖技术。防抖是指在用户停止输入一段时间后才触发搜索请求。这样可以减少不必要的搜索请求，并提高性能。

实现防抖搜索输入框

首先，我们需要创建一个 ref 来存储搜索输入框的值。我们可以使用 ref 方法来做到这一点。

const searchInput = ref('');

接下来，我们需要创建一个防抖的 ref。我们可以使用 computed 方法来做到这一点。

const debouncedSearchInput = computed(() => {
  return debounce(searchInput.value, 500);
});

debounce 函数是一个帮助函数，它可以将一个函数包装成一个防抖函数。在上面的代码中，我们将 searchInput.value 传递给 debounce 函数，并将延迟时间设置为 500 毫秒。这意味着，当用户停止输入 500 毫秒后，debounce 函数才会更新 debouncedSearchInput.value 的值。

最后，我们可以使用 debouncedSearchInput.value 来触发搜索请求。

watch(debouncedSearchInput, (value) => {
  // 触发搜索请求
});

当 debouncedSearchInput.value 发生变化时，watch 函数就会触发。此时，我们可以触发搜索请求。

完整示例代码

<template>
  <input v-model="searchInput" placeholder="Search">
</template>

<script>
import { ref, computed, watch } from 'vue';

const debounce = (value, delay) => {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      value();
    }, delay);
  };
};

export default {
  setup() {
    const searchInput = ref('');

    const debouncedSearchInput = computed(() => {
      return debounce(searchInput.value, 500);
    });

    watch(debouncedSearchInput, (value) => {
      // 触发搜索请求
    });

    return {
      searchInput,
      debouncedSearchInput,
    };
  },
};
</script>