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

Question

我正在使用 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 的自定义类初始化的对象，该自定义类也在同一组件的脚本部分中声明。基本上它们包含相同的值，但 Tariff 可以更改值，而 BaseTariff 的值应保持不变。

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" 绑定(bind)到数字输入) this.BaseTariff.provAufwand.SO 的值也改变了，尽管我从未在代码中改变它。这是为什么？它们在我的代码中的什么位置连接？

Answer 1

假设您创建了如下所示的 Tariff 实例:

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

那么当您更改 tariff 时 BaseTariff 或 tariffCopy 也会发生变化的原因是它们引用相同的 provAufwand 对象。

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

When you passed an object or an array to a function, then the argument is passed by reference.

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

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

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

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