请帮忙找一下根本原因。
发布于 4 天前 作者 feer 40 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

父组件:
image
image
子组件:

具体操作:
1.在父组件点击del事件,目的去清空子组件的某个变量;
2.子组件去深度监视父组件传过来的值,并去设值this.arr=val;此时去点击触发change函数,改变子组件的在data函数中声明的变量 arr,此时会报错:[Vue warn]: You may have an infinite update loop in watcher with expression “myarr”

代码如下:
父组件:
template:
<el-button [@click](/user/click)=“del”>删除全部

methods:
del(){
this.arr=[];
},

子组件:(demo.vue)


<el-button [@click](/user/click)=“change”>改变
5 回复

其实我心中最疑惑的就是,我并没有更改父组件的变量myarr,但是却触发了这个监听函数。

明白了,没有想到这一层,有疏忽地址引用问题了

您很厉害,直接找到了原因。是的,如果这样改了,就不会引发无限循环。

怀疑是传址赋值的问题,试试:

this.arr = [...val];

另外,val.length 都是0了, 为啥还要执行赋值操作呢, 直接 this.arr = [] 不更好么……

因為你這樣做會讓 arr 指向 myarr,導致你更動 arr 等於更動了 myarr 。
es6的擴展運算符提供了複製數組的方法。

回到顶部