当我们要做一个实时搜索时，用watch监控数据，当数据不断变化时，不可能立刻进行接口的请求，这样会给服务器带来麻烦，使服务器负载加重，此时就需要一个延时加载机制。
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>xichuan</title>
<link rel=\"stylesheet\" href=\"https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css\" rel=\"external nofollow\" />
<<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>
<script src=\"https://cdn.bootcss.com/element-ui/2.4.11/index.js\"></script>
</head>
<body>
<div id=\"test\">
<el-input id=\"inputSearch\" placeholder=\"输入关键字搜索\" suffix-icon=\"el-icon-search\" size=\"mini\" v-model=\"search\"></el-input>
{{show}}
</div>
</body>
<script>
new Vue({
el: \'#test\',
data: {
search:\'\',
show:\'\',
timer: null,
},
watch:{
search:function(val, oldVal){
//当不断输入字符时，因为延时执行还没有开始，就被清除，然后重新生成新的延时器
//虽然不停的清除，生成新的延时器，但在输入的时候延时器内部的方法都一直没有被执行
clearTimeout(this.timer); //清除延迟执行
this.timer = setTimeout(()=>{ //设置延迟执行
console.log(\'search:\'+val+\',\'+oldVal);
this.show = this.search;
},1000);
}
}
});
</script>
<style>
#inputSearch{
width: 200px;
left: 20px
}
</style>
</html>
以上这篇vue之延时刷新实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容