使用 Composition API 在 Vue3 中创建防抖搜索输入框

随着 Vue3 中 Composition API 的引入，有了编写响应式逻辑的新方法，即ref和reactive方法。在本文中，将展示如何创建一个防抖的ref，该ref将在指定的延迟后才更新值。例如，有一个带有自动完成功能的搜索框，在该字段中搜索查询状态更改后发起 API 请求，那么防抖的ref就会非常有用。

防抖是一种不错的优化方式，如果没有这种方式，则每次点击后都会发起 API 请求。

实例代码仓库：https://github.com/QuintionTang/debounced-search

开始

为了完成这个实例，将采用 Vite 创建一个新项目。可以通过运行yarn create @vitejs/app debounced-search 或者npm init @vitejs/app debounced-search，然后选择Vue模板。执行完后将生成基础的项目目录结构。

src/App.vue

正如上面说的，当搜索框中中输入搜索条件时，可以使用防抖引用来延迟 API 请求。

在模板中，有一个 label、input 和包含关键字 query 的 div。完成后，将看到值只有在延迟之后才被更新。在setup方法中，使用useDebouncedRef函数创建一个debounce ref，并传递一个空字符串作为初始值和数值 500，500 是 debounce 的延迟。除此之外，还有一个观察器来观察查询ref。这就是可以初始化一个函数来执行发起 API 请求的地方。

useDebouncedRef.js

下面是组件useDebouncedRef的实现代码：

import { ref, customRef } from "vue";
/** * * @param {*} fn 回调函数 * @param {*} delay 延迟毫秒数 * @param {*} immediate 是否立即执行 * @returns */const debounce = (fn, delay = 0, immediate = false) => {    let timeout;    return (...args) => {        if (immediate && !timeout) fn(...args);        clearTimeout(timeout);
        timeout = setTimeout(() => {            fn(...args);        }, delay);    };};
const useDebouncedRef = (initialValue, delay, immediate) => {    const state = ref(initialValue);    const debouncedRef = customRef((track, trigger) => ({        get() {            track();            return state.value;        },        set: debounce(            (value) => {                state.value = value;                trigger();            },            delay,            immediate        ),    }));    return debouncedRef;};
export default useDebouncedRef;

在 useDebouncedRef.js 文件中有两个方法 deounce 和 useDebouncedRef 函数。debounce函数实现在指定的延迟时间过后执行回调函数。除了回调函数和延迟时间，它还接受第三个名为immediate的参数，用来指示回调是否应该立即执行。这个函数可以抽象到通用方法文件中，在应用程序的其他部分中调用。

useDebouncedRef 方法中，使用了 vue 包中的ref方法声明一个新的响应值，使用 customRef方法，来创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并应返回一个带有 get 和 set 的对象。

完