如果有个需求，用户在搜索框里的，只要搜索框里面的内容变动，就进行异步请求，就理来说这个功能简单的不行。
<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>
节流前
节流后
