Vue随笔——数组中数据改变，页面不更新

Vue数组中数据改变，页面不更新

问题描述：点击商品，加入购物车时，如果购物车中已经存在该商品，此时购物车列表的商品数量不更新。

原因：官方文档解释如下

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。

解决方案：

this.$set(this.tableData, i, this.tableData[i])
//Vue.set(this.tableData, i, this.tableData[i])  //这样写报Vue is not defined，后续再研究

完整代码示例

商品列表，点击列表中的商品时，会添加到购物车列表中

<ul class="cookList">
  <li v-for="(goods,index) in type0Goods" :key="index" @click="addOrderList(goods)">
    <span class="foodImg"><img :src="goods.goodsImg" width=