记一次vm.$watch的巧妙使用

1、产品的需求是要在发货页面，每个商品下面添加扫码输入框，扫码发货之后验证IMEI是否能发货。
如图红框为扫码匡(光标在输入框中，用扫码枪扫码即可填充数据进去)。

此处如果扫的是箱标码的话，会出现多个换行的数据，如下图:

2、那么问题来了，数据有多少个是不确定的，怎么判断是扫码输入，还是手动输入呢？(因为扫码框扫码是扫码完成自动去请求数据，而不是点击按钮)。

3、我的实现是：监听扫码框里的数据变化的时间，如果小于100ms就是扫码枪扫入，如果大于100ms就是手动输入(因为扫的箱规码数据有点多，所以加大了时间，一般扫码输入在8ms左右)。

4、监听扫码输入框：
(1)、因为商品数据 orderGoods 是后端请求来的，并没有扫码输入框 等数据，需要vm.$set添加。
(2)、我新建了一个对象 this.scan添加数据

for (var i=0; i<this.orderGoods.length; i++) {
    this.$set(this.scanObj, i, {
    	tableData: '', 
    	onImeiCheckLoading: false, 
    	scanLoading: false, 
    	scanedImeis: '', 
    	oneImei: '', 
    	imeiTip: false
    }
)

(3)、如何监听扫码输入框内容变化？只能在 watch 中监听 scanObj整个对象？这样代价太大，不光会监听到扫码输入框变化，还会监听到表格数据变化等。
(4)、后面想到了单独建个对象来存储 扫码输入框的数据，但这样多了一个for循环，并且监听的也是页面所有的输入框。
(5)、最终在扫码输入框onfocus事件的时候，使用vm.$watch动态监听扫码输入框内容：

// 动态监听 单个扫码输入框数据
scanFocusFn: function(index) {
    this.$watch(function () {
        return this.scanObj[index].scanedImeis
    },
    function (newVal, oldVal) {
        if (newVal !== oldVal) {
            // 数据变化了，执行逻辑，这里做好防抖。
            clearTimeout(this.timeoutFlag);
            if (newVal.length >= 15) {
                this.timeoutFlag = setTimeout(() => {
                    this.scanImeiFn(newVal, index)
                }, 300)
            }
        }
    })
},

好处就是，一个页面有很多个扫码输入框，我只在输入框focus的时候才去监听当前输入框的数据变化(单个数据奥)，相比监听大的对象，节省了很大的计算量。