背景:父组件给子组件传值,子组件需要对传入的值进行修改,并展示
父组件代码:
子组件代码:
出现的bug:watch中被调用了两次,导致数据重复数据
原因:watch中的参数用了deep属性,监听传入parentItemList的深层次的变化,在watch中调用countHot方法对数据进行更改。虽然已将父组件传入的parentItemList值赋值给data中声明的itemList,但当前的赋值只是复制了指针(详情查询浅拷贝与深拷贝)。itemList与parentItemList指向同一个内存地址,所以itemList在更改的过程中parentItemList也在更改,会再次被watch捕获。父组件传递一次值子组件watch执行两次。其中renderItem函数进行了页面数据流赋值操作,被执行了两次,导致出现数据重复bug
修复方式:
使用JSON.parse(JSON.stringify(n))进行深拷贝,这样itemList修改的时候parentItemList不会再被修改,watch不会再被监听