Vue中用lodash的debounce防抖来控制文本框实时搜索触发接口的频率

项目中常有这样的功能情景：

列表页里有文本框，用来模糊搜索，而文本框的触发事件，一般都是 keyup 、 input 、enter键（手机上是完成/搜索按钮） ， 除去 enter 键的事件是按一次触发一次以外 ， keyup 事件是按键松开就会触发的。

那么问题来了，不停的输入，按键按了多少次，文本框绑定的 keyup 事件就会被触发多少次，导致接口请求频率高发，这种问题在浏览器Network里就显而易见，有一水儿的同一个接口的请求都是pending状态待响应。严重的会造成服务器高压。

为了控制高频触发接口，lodash工具函数库作用就来了，它的debounce函数可以有效控制连续操作只取最后一次触发，会等连续操作停下之后再给你响应。

用法如下：

1. 进入项目根目录，用npm 安装 lodash， 用 cnpm 也行
   npm install --save lodash

2. 单个组件里这么用：

以下我用 vue + mint ui 做搜索的功能，适用手机H5端，可实时输入搜索，可点击手机键盘完成/搜索按钮触发：

注意，像element ui , mint ui 这样的vue框架对input封装了一道，绑定事件要加 native 修饰符 ，否则无法触发事件。