[vue]vue 数据修改出现异常，不是预想的效果

在做移动端app时，修改购物车的过程中，逻辑如下：
    购物车数量相减1
    判断如果数量减1后，如果为0删除此条数据


问题：
     上一条数据为0，下一条数据为1时，进行删除后，下一条数据，也变成了0
 
代码如下：

this.checkProdcutList[index].num--;
if(this.checkProdcutList[index].num==0){
   this.checkProductList.splice(index,1);
}

原因：

  异步更新队列
 Vue中数据与视图的显示是双向的, 数据显示时,DOM 也会进行更新;
 Vue在更新DOM时是异步执行的，只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更;



解决方案：

使用$nextTick() 方法, 将删除数组的操作放在里面, 即使用$nextTick() 方法，让删除数组的操作延迟执行
即：通过$nextTick()实现让 this.checkProdcutList[index].num-- 代码执行，且DOM更新后，再执行$nextTick()k中的 this.checkProductList.splice(index,1);

this.checkProdcutList[index].num--;
if(this.checkProdcutList[index].num==0){
    this.$nextTick(() => {
       this.checkProductList.splice(index,1);
    }
}

参考文献：

Vue中this.$nextTick 的作用：https://segmentfault.com/a/1190000020715185
简单理解Vue中的nextTick：https://www.jianshu.com/p/a7550c0e164f