vue中watch被调用两次


背景:父组件给子组件传值,子组件需要对传入的值进行修改,并展示

父组件代码:

子组件代码:

出现的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不会再被监听

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容