到这里我们就可以看到我们要的模糊查询功能已经实现了，但是我们上面讲到模糊查询会影响浏览器的性能，从控制台输入的变量i的值可以看到我们的search方法已经被调用了8次，我们输入的字符越长被调用的次数越多，如果方法里面有操作DOM的行为性能影响会更严重；所以我们现在来加上节流函数来看看：
//节流函数 throttle(){ //保持this的指向始终指向vue实例 var that=this; if(!that.statu){ return; } that.statu=false; setTimeout(function(){ console.log(new Date()); that.search(); that.statu=true; },1000) },
我们把我们写的节流函数封装在throttle里面执行，把@keyup绑定的点击事件修改为throttle，当用户输入字符的时候触发节流函数；
效果图如下：
我们可以从控制台很清晰的看到当我们使用节流函数的时候，当我们输入了8个字符我们的方法只执行了两次，并且执行时间是每隔一秒执行一次，一个方法执行2次肯定会比执行8次不管是在效率还是在性能方面都会是比较大的提升，用了节流函数之后相对上面没用的节流函数来说，我们极大的实现了性能提升、优化，所以在高频率触发的事件中我们是可以建议用节流函数来进行控制和解决问题的；