前段時間倉庫反映掃描識別慢，應要求去倉庫出差排查問題，首先倉庫的電腦配置較低，而且最近加了一個掃描二維碼的功能（大概有接近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 type="text" placeholder="包裹條碼" v-model.lazy="barCode" @keyup.native.enter="search" />
————————————————
版權聲明：本文為CSDN博主「涳涳嘚慌」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/oschina_41767564/java/article/details/104105804