vue v2 значение внутри объекта внутри свойства класса изменено, хотя и не изменено

Question

Я использую vue v2 для создания SPA.Я объявил класс Offer, как этот, в разделе script моего компонента vue:

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, также объявленного в разделе script того же компонента.В основном они содержат те же значения, но 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") значение 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);

Тогда причина, по которой 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});

Это гарантирует, что вы передаете совершенно разные объекты при создании экземпляров вашего класса.