当我们需要在 input 输入后发送请求时，我们可以使用防抖操作来实现

#基础实现

input 元素实现防抖是一种常见的需求，可以通过在输入事件上应用防抖函数来实现。以下是如何在 Vue 3 中使用 input 元素实现防抖的方法：

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
          <template>
  <input v-model:value="inputValue" @input="handleInput" type="text" placeholder="请输入内容" />
</template>

<script>
import { ref } from 'vue';
import { debounce } from 'lodash'; // 使用 lodash 中的 debounce 函数,也可以自己实现 防抖

export default {
  setup() {
    const inputValue = ref('');
    
    // 定义防抖函数，延迟时间为500毫秒
    const debouncedInput = debounce((value) => {
      // 处理输入事件
      console.log('输入内容：', value);
      // 在此处可以执行其他逻辑，例如发送请求或触发其他操作
    }, 500);
    
    // 处理输入事件的方法
    const handleInput = (event) => {
      // 更新输入值
      inputValue.value = event.target.value;
      // 调用防抖函数
      debouncedInput(inputValue.value);
    };

    return {
      inputValue,
      handleInput
    };
  }
};
</script>

        

在上面的代码中，我们通过 @input 监听输入事件，并在事件触发时调用 handleInput 方法。在 handleInput 方法中，我们更新输入值并调用防抖函数 debouncedInput，确保在一定时间内只触发一次处理逻辑。

#Vue 3 的 customRef

Vue 3 中的 customRef 是一个强大的新特性，它允许开发者创建自定义的响应式引用。通过 customRef，开发者可以灵活地定义引用的行为，从而实现一些高级的响应式逻辑。

#介绍

customRef 接收一个工厂函数作为参数。这个工厂函数会在组件渲染时被调用，并返回一个对象，其中包含了自定义的 Ref 的读取和更新行为。factory 函数会接收 track 和 trigger 作为参数，这两个参数是用来追踪和触发 `Ref`` 变化的函数。通过自定义这些行为，我们可以实现各种高级的响应式逻辑，比如防抖、节流等。

了解了概念后我们就可以开始使用它了

#使用 customRef 实现防抖

防抖是一种常见的性能优化技术，它可以确保在某个时间段内只执行一次特定的操作。使用 Vue 3 的 customRef，我们可以轻松地实现一个防抖函数，并将其应用于 Vue 组件中。

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
          import { customRef, Ref } from 'vue';

function useDebounce<T>(value: T, delay: number = 200): Ref<T> {
  let timeout: ReturnType<typeof setTimeout>;

  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 追踪依赖
        return value;
      },
      set(newValue: T) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger();  // 触发更新
        }, delay);
      }
    };
  });
}

export default {
  setup() {
    const inputValue = useDebounce<string>('');

    return {
      inputValue
    };
  }
};

        

在上面的代码中，我们定义了一个名为 useDebounce 的函数，它接受一个值和一个延迟参数，并返回一个使用 customRef 创建的响应式引用。在这个响应式引用中，我们使用了一个定时器来实现防抖逻辑，确保在一定时间内只执行一次值的更新操作。

#在 Vue 组件中使用

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
          <template>
  <input v-model:value="inputValue" type="text" placeholder="请输入内容" />
</template>

<script>
import { useDebounce } from './useDebounce';

export default {
  setup() {
    const inputValue = useDebounce('', 500);

    return {
      inputValue
    };
  }
};
</script>

        

在 Vue 组件中，我们可以通过调用 useDebounce 函数来创建一个防抖的响应式引用，并将其绑定到输入框的值上。这样，我们就可以确保用户在输入内容时只触发一次更新操作，从而提高了性能和用户体验。