使用扫描枪扫描条码时字符识别写入缓慢问题（针对element-ui的el-input）优化

前段时间仓库反映扫描识别慢，应要求去仓库出差排查问题，首先仓库的电脑配置较低，而且最近加了一个扫描二维码的功能（大概有接近200个字符写入），整体扫描时间（输入框写入字符+接口返回）返回结果一共用了2800ms左右。

问题1：接口返回数据慢（后续已解决，接口那边大概从原来的500ms响应优化到100ms左右）
问题2：扫描器扫描完后字符写入输入框速度缓慢（通过keydown那里用console.time来检测出前端输入框写入大概2200ms左右）

问题解决方案的摸索

1.使用 函数防抖 指令（对change事件数据频繁更新做优化） [×]
2.去掉el-input的v-model.trim（以为.trim操作符去掉前后空格的性能问题，tips：建议去掉，因为扫描枪扫描出现空格时偶尔会出现写入字符缺失问题） [×]
3.直接在el-input的v-model上加上 .lazy 操作符（让v-model双向数据绑定更新频率降低 ） [×]
4.原有的通过 keydown 绑定的事件改为 keyup （扫描器输入字符keydown事件执行性能问题，采用keyup事件减少事件的执行） [×]
5.使用原生input输入框，配合v-model.lazy，还有使用keyup事件（从2200ms优化到600ms左右） [✔]

问题解析

看过element-ui的el-input源码内部得知，v-model数据更新时用watch来做的，在电脑配置较好以及一次写入字符数量不大的情况下（可以用扫描枪扫描条码二维码写入模拟）性能感觉差距不大，而且.lazy操作符不生效；所以最终采用了原生input来处理，而且使用keyup事件也是因为keydown事件在扫描枪扫描写入情况下触发较多。

代码分享

 <input  ref="codeBox"  v-model="barcode"  class="lightInput"  placeholder="请扫描条码" 
  v-autofocus type="text"  @keyup.enter="toQuery" @keydown.tab="toQuery" />

v-autofocus：自定义指令，确保输入框一直在获取焦点

export default {
  directives: {
    // 指令的定义
    autofocus: {
      inserted: function (el) {
        // 获得焦点
        el.focus();
      },
    },
  },
 }

Tips：

<input type="text" placeholder="请扫描条码" v-model.lazy="barcode" @keyup.enter="toQuery" v-autofocus ref="codeBox" />
@keyup的“.native”要记得去掉哦