由于有3,4个客户说偶尔打开某个组件时会有卡顿现象,所以仔细看了下代码

这是keyup事件上绑定的代码

chooseLensSpec: function (event) {
  let num = this.input_num_limit($(event.target).val(), {
    int: 4,
    dec: 0
  })
  if (num === '' && this.pageType === 'inventoryCheck') {
    num = '0'
  }
  $(event.target).val(num)
  let that = this.lens.chosenLists
  if ((num > 0 && this.pageType === 'order') || ((num > 0 || num === '0') && this.pageType === 'inventoryCheck')) {
    let hasSame = false
  for (let i = 0; i < that.length; i++) {
    if (that[i].sph === $(event.target).parents('.sph-row').attr('degree') &&
    that[i].cyl === $(event.target).parents('.cyl-col').attr('degree')) {
    that[i].count = num
    hasSame = true
  }
}
if (!hasSame) {
  that.push({
    id: this.id,
    sph: $(event.target).parents('.sph-row').attr('degree').toString(),
    cyl: $(event.target).parents('.cyl-col').attr('degree').toString(),
    count: num,
    bizStock: $(event.target).parents('.cyl-col').find('.bizstock').html()
  })
}
} else {
  $(event.target).parent('.cyl-col').removeClass('chosen')
  for (let i = 0; i < that.length; i++) {
    if (that[i].sph === $(event.target).parents('.sph-row').attr('degree') &&
      that[i].cyl === $(event.target).parents('.cyl-col').attr('degree')
    ) {
    that[i].count = num
   }
  }
 }
}
 
当选择数量多的时候 每次keyup都会循环一遍40长度以上的数组,遂改之,改为缓存对象索引,以下为修改以后的代码
chooseLensSpec: function (event,sph,cyl) {
//设置索引
let currentClickIdx = `${sph}-${cyl}`

let num = this.input_num_limit($(event.target).val(), {
  int: 4,
  dec: 0
})
if (num === '' && this.pageType === 'inventoryCheck') {
  num = '0'
}
$(event.target).val(num)
let that = this.lens.chosenTempObj
if(!isNaN(num) && Number(num)!==0){
  that[currentClickIdx] = {
    id: this.id,
    sph: $(event.target).parents('.sph-row').attr('degree').toString(),
    cyl: $(event.target).parents('.cyl-col').attr('degree').toString(),
    count: num,
    bizStock: $(event.target).parents('.cyl-col').find('.bizstock').html()
  }
}
else{
  delete that[currentClickIdx]
}

},
 
改完之后发现还是有客户电脑内存占用过高,遂发现点击事件触发DOM操作过多引起的:
selectLensSpec: function (event,sph,cyl) {
  if(!this.enableSelectLen){
    return
  }

this.enableSelectLen = false

var obj = {}
//设置索引
let currentClickIdx = `${sph}-${cyl}`

// this.$nextTick(()=>{
if (!$(event.target).hasClass('cyl-col')) {
  obj = $(event.target).parents('.cyl-col')
} else {
  obj = $(event.target)
}
obj.toggleClass('chosen')
if (obj.hasClass('chosen')) {
  let type = this.orderType
if (this.autoFillInventoryNumber && (type === 'STOCK_RETREAT' || type === 'INVENTORY_OUT') && Number(obj.find('.bizstock').text()) > 0) {
  obj.find('.spec-text').val(obj.find('.bizstock').text()).focus().select()
} else {
  obj.find('.spec-text').val('1').focus().select()
}
} else {
  obj.find('.spec-text').val('')
}
let count = obj.find('.spec-text').val()
this.lens.chosenTempObj[currentClickIdx] = {
  detailId: obj.data('detailid') ? obj.data('detailid').toString() : null,
  id: this.id,
  sph: obj.parents('.sph-row').attr('degree').toString(),
  cyl: obj.attr('degree').toString(),
  count: count,
  bizStock: obj.find('.bizstock').html()
}
this.enableSelectLen = true
// })

},
 
重构代价过大,最后决定不改
ps:老项目jquery转vue是真的烦。。。好多坑 以后少在vue中用jquery