vue改变一个变量值关联的变量也变换解决方法(引用和传值)
最近公司项目做多订单下单是遇到一个问题,有一个公共变量的dataForm1用来记录单条订单信息,这时候有个变量dataForm2用于记录总订单信息,遍历方法每加一条dataForm1的时候push到dataForm2,发现dataForm2中的每条订单信息都和最后添加的数据是重复的,这里是因为涉及了一个值的引用和传递的问题 首先说下引用和传值的条件区别引用:object(对象...
·
最近公司项目做多订单下单是遇到一个问题,有一个公共变量的dataForm1用来记录单条订单信息,这时候有个变量dataForm2用于记录总订单信息,遍历方法每加一条dataForm1的时候push到dataForm2,发现dataForm2中的每条订单信息都和最后添加的数据是重复的,这里是因为涉及了一个值的引用和传递的问题
首先说下引用和传值的条件区别
引用:
object(对象) array(数组)这两个类型进行等于赋值的时候实际上是进行的引用,源数据改变后目标数据也就发生了变换
传值:
string number boolean这几个类型进行赋值的时候是进行的传值,并不会跟着源数据的变换目标数据发生改变
比如
data() {
return {
dataForm1:{
number:1
},
dataForm2:[]
}
};
this.dataForm2.push(this.dataForm1);
console.log( this.dataForm2[0].number );//1
这个时候dataForm2中添加dataForm1打印出来的是没有问题的
this.dataForm1.number =120;
this.dataForm2.push(this.dataForm1);
console.log( this.dataForm2[0].number );//120
console.log( this.dataForm2[1].number );//120
然后在添加一条修改过的dataForm1会发现之前添加的第一条也发生变化了、
这里是因为dataForm2是在引用dataForm1的值而不是传递
解决方法
this.dataForm2=JSON.parse(JSON.stringify(this.dataForm1))
更多推荐
已为社区贡献6条内容
所有评论(0)