弱鸡教你搜索框节流防抖

如果有个需求，用户在搜索框里的，只要搜索框里面的内容变动，就进行异步请求，就理来说这个功能简单的不行。

<template>
    <input type="text" value="" v-model="val"/>
</template>

<script>
    export default {
        data () {
            return {
                val: ''
            }
        },
        watch: {
            val(newVla) {
                setTimeout(() => {
                    //异步请求的数据
                }, 500)
            }
        }
    }
</script>

用户每输入一个字母，甚至是数字也会进行异步。
如果1个用户在输入框中 输入了10个字母，那就是10次异步请求，那如果10个用户同时输入10个字母就是100次异步，如此类推；100个用户、200个用户，所以这一块进行节流防抖很重要，可以非常有效的解决后台的压力对这一块的压力。

封装成组件

<template>
    <input type="text" value="" v-model="val"/>
</template>

<script>
    export default {
        props: ['data'],
        data () {
            return {
                val: this.data,
                time: ''
            }
        },
        watch: {
            val (newVla) {
                let This = this
                //父级组件绑定data值需要用到的修饰符.sync
                this.$emit("update:data",newVla)
                clearTimeout(this.time)
                this.time = setTimeout(() => {
                //节流完毕之后触发一个自定义函数
                    This.$emit('chang')
                }, 500)
            }
        }
    }
</script>

//父级组件的调用
<template>
    <view>
        <search-input :data.sync="val" @chang='text'></search-input>
    </view>
</template>

节流前
节流后