Question

我有两个变量，例如 priceInUSD 和 priceInRub 和 rate 美元/卢布。

data: () => ({
  priceInUSD: 0,
  priceInRub: 0,
  rate: 65.395402,
});

当用户更改一个变量时，应重新计算第二个变量。但是，如果我同时使用watch（），则会导致冗余的计算调用和潜在的无限循环。一个重新计算第二个，第二个呼叫监视第一个，第二个和第一个呼叫监视无穷大。

当我使用计算和获取/设置程序...

computed: {
priceInUSD: {
  get(){
    return this.statePriceInUSD;
  },

  set(newValue){
    this.statePriceInUSD = newValue;
    this.statePriceInRub = newValue * this.rate;
  }
},

priceInRub: {
  get(){
    return this.statePriceInRub;
  },

  set(newValue){
    this.statePriceInRub = newValue;
    this.statePriceInUSD = +newValue / this.rate;
  }
},
}

... 太，导致其他变量的重复计算。

更改美元价格
重新计算卢布的价格（确定）
再次按美元重新计算价格（不好）

是否可以重新计算两个相互关联的变量，而不必重新计算第一个变量？

Answer 1

此解决方案有效（您可能搞砸了变量）：

new Vue({
  el: "#app",
  data: {
    statePriceInUSD:0,
    statePriceInRub: 0,
    rate: 65.395402,
  },
  computed: {
   priceInUSD: {
     get(){
       return this.statePriceInUSD;
     },

     set(newValue){
        console.log('USD new value: ' + newValue);
        this.statePriceInUSD = newValue;
        this.statePriceInRub = newValue * this.rate;
     }
},

priceInRub: {
  get(){
    return this.statePriceInRub;
  },

  set(newValue){
      console.log('RUB new value: ' + newValue);
      this.statePriceInRub = newValue;
      this.statePriceInUSD = +newValue / this.rate;
   }
},
}
})

这里是工作示例https://jsfiddle.net/a4ped21h/

在Vue上观看两个相互关联的变量

1 个答案: