首先,原代码及报错信息如下,情况是:data是父组件传入的数据,子组件需要监听data并及时取data的数据更新表格数据,且自己手动添加一列操作列。报错的百度直译为:您可能会在watcher中使用表达式“data”进行无限更新循环。
显而易见,赋值时,由于给到tableHeaders的是newVal.header的内存地址,也就是传过来的data里的属性为header的内存地址,也就是我们常说的浅拷贝。
当我们修改赋值后的tableHeaders时,指向相同内存地址的data.header是一起变的,这时,watch监听中属性deep为true,所以又监听到了data改变了,继续执行handler,从而进入了死循环。
为了解决一个浅拷贝带来的影响,将浅拷贝换为深拷贝就可以,下图是我使用JSON.parse(JSON.stringify())将data深拷贝了一份,再进行其他操作,问题便解决了。
this.tableData4 = JSON.parse(JSON.stringify(this.selectionSupplier));