Question

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

<iostream>

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

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);
    }
}

其中

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

在调用provAufwand= { SO: 1, HO5: 2, HO10: 3, HO20: 4 }时（p1和p2绑定到通过Offer.changeSAC(p1,p2)和v-model="p1"的数字输入上），v-model="p2"的值也被更改了，尽管我从未更改过在代码中。这是为什么？它们在我的代码中的哪里连接？

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时，参数已通过引用。

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

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

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

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

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

1 个答案: