Vue3学习（四）

连接数据库实现数据防抖

shake.js

export function shake(fn,delay){
    let time=null;
    return function(){
        let parameter=arguments;
        if(time){
            clearTimeout(time);
        }
        time=setTimeout(()=>{
            fn.apply(this,parameter);
        },delay)
    }
}

 

index.vue

<template>
    <input type="text" v-model="msg" id="shake" @keyup="input" placeholder="请输入银行卡号码">
    <hr />
    <span>{{ msg.replace(/(\d{4})(?=\d)/g, "$1 ") }}</span>
    <ul v-for="(l,i) in logins" :key="i">
        <li>{{l}}</li>
    </ul>
</template>

<script lang="ts">
import { customRef,ref} from 'vue'
import { shake } from "../views/js/shake.js"
import axios from '../views/axios/axios.min.js'
export default {
    setup() {
        let logins:object=[];
        const input = shake((e: any) => {
            console.log("http://localhost:8082/login/get/"+msg.value);
            axios.get("http://localhost:8082/login/get/"+msg.value)
            .then((response:any)=>{
            console.log(response.data);
            logins=response.data
            console.log(logins)
            }).catch((error:any)=>{
            console.log(error);
            });
        }, 2000)
        
         //自定义响应式函数，指定值为value
         let myRef = function (value: any) {
            return customRef((track, trigger) => {
                return {
                    get() {
                        //通知Vue追踪该变量
                        track();
                        return value;
                    },
                    set(newValue) {
                        //是数字就赋值
                        if (!isNaN(newValue) && newValue.length <= 16) {
                            value = newValue;
                        }
                        trigger();//更新视图
                    }
                }
            })
        };
        let msg = myRef("customRef")
        return { msg, input,logins}
    }

}
</script>