前端框架

10 04月

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

2021-04-10 前端框架

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

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

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

vue3 vite app

 

开始

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

vue3 search app

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 的对象。

组合式APIvue3