javascript - 类属性内对象内部的vue v2值已更改，但未更改

我正在使用vue v2创建SPA。
我在vue组件的脚本部分中声明了一个Offer类，如下所示：

class Offer {
       constructor(Tariff, TariffCopy, billing, at, fa, backs) {
       this.Tariff = Tariff;
       this.BaseTariff = TariffCopy;
    }

    changeSAC(p1, p2) {
       ...
       this.Tariff.provAufwand.SO = this.BaseTariff.provAufwand.SO + Number(p1);
    }
}

Tariff和TariffCopy是从称为Tariff的自定义类初始化的对象，该类也在同一组件的脚本部分中声明。基本上它们包含相同的值，但“关税”可以接受值的更改，而“基础关税”的值应保持不变。

class Tariff{
    constructor(provAufwand) {
        this.provAufwand = provAufwand;
    }
}

哪里

provAufwand= {
    SO: 1,
    HO5: 2,
    HO10: 3,
    HO20: 4
}

调用Offer.changeSAC(p1,p2)时（p1和p2通过v-model="p1"和v-model="p2"绑定到数字输入），this.BaseTariff.provAufwand.SO的值也被更改，尽管我从未在代码中进行更改。
这是为什么？它们在我的代码中的哪里连接？

最佳答案

假设您创建了如下的Tariff实例：

const provAufwand= {
    SO: 1,
    HO5: 2,
    HO10: 3,
    HO20: 4
};
const tariff = new Tariff(provAufwand);
const tariffCopy = new Tariff(provAufwand);

那么更改BaseTariff时tariffCopy或tariff也会更改的原因是它们引用了相同的provAufwand对象。

当您将provAufwand传递给Tariff构造函数时，传递的参数不是对象的实际value而是对象的reference。


  当您将object或array传递给函数时，则参数
  通过引用传递。


这意味着更改函数内部对象/数组的值会影响函数外部相同对象/数组的值。

要解决此问题，可以在创建新的spread syntax对象时传递provAufwand时使用Tariff。

const provAufwand= {
    SO: 1,
    HO5: 2,
    HO10: 3,
    HO20: 4
};
const tarrif = new Tariff({...provAufwand});
const tarrifCopy = new Tariff({...provAufwand});

这样可以确保在创建类实例时传递完全不同的对象。