其他分享
首页 > 其他分享> > 使用Composition API在Vue3中创建防抖搜索输入框

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

作者:互联网

随着Vue3中Composition API的引入,有了编写响应式逻辑的新方法,即refreactive方法。在本文中,将展示如何创建一个防抖的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 的对象。

 

 

标签:防抖,函数,useDebouncedRef,immediate,输入框,API,debounce,ref
来源: https://blog.51cto.com/u_15088848/2711740