最近公司项目做多订单下单是遇到一个问题,有一个公共变量的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))

 

Logo

前往低代码交流专区

更多推荐