P2:$watch进阶实现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
function jieliu(func,delay){
    let timer;
    return function(...args){
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            func.apply(this,args)
        },delay)
    }
}
//延时执行
created(){
    data(){
        return{
            query:''    //输入框内容
        }
    },
    this.$watch('query',jieliu((newQuery)=>{
        //每次输入都会去请求搜索接口。。
        this.$emit('query',newQuery)
        //暴露给父组件，输入的字符为何，做另外的处理
    },200))
}
【VUE】, 常用技巧