Vue修改数组某一项，页面不会重新渲染

有一个项目，做的功能是扫描条码，然后商品的数量加一。
但是，因为修改的是数组中某一项的某个属性，但是页面渲染的是数组，这是引用数据类型，更改其中的一个属性并不会触发变更检测。
下面上一下代码，讲解一下

具体的业务流程就是扫描条码，先确认条码是否为空，然后判断接口里面的数据是否有扫描的条码，最后，把扫描数量加一

// 货品条码扫描回车事件
scanCodeHandle() {
	var hasCode = false;	// 定义变量，确定扫描的条码订单内是否拥有
	if (this.scanCode == '') {
		return uni.showToast({
			title: '条码不能为空'
		})
	}
	for (var i = 0; i < this.instockList.length; i++) {
		// 用输入的条码和接口返回的条码比较
		if (this.scanCode == this.instockList[i].BarCode) {
			this.instockList[i].scanNum +=1
			hasCode = true;
		}
	}
	this.instockList = this.instockList.slice()
	if(!hasCode){
		uni.showToast({
			title:'无此条码'
		})
	}
}

这句代码this.instockList[i].scanNum +=1扫描对应的条码数量加一，没有即时渲染到视图里面，最后加上this.instockList = this.instockList.slice()这句代码才可以。
因为页面渲染的是this.instrockList，这是引用数据类型，更改其中的一个属性并不会触发变更检测。this.instrockList.slice() 是重新生成了一个数组，这样的话就是重新生成了数组，页面也就重新渲染了。