Vue.js觀察者觸發一個無限循環

Question

我正在構建一個寬高比計算器。 如果我有4個相互依賴的變量，我怎么能避免無限循環呢？

我必須設置4個觀察者，每個數據元素一個。

watch: {
widthRatio(value) {
  this.pxWidth = (value * this.pxHeight) / this.heightRatio;
},
heightRatio(value) {
  this.pxHeight = (value * this.pxWidth) / this.widthRatio;
},
pxWidth(value) {
  //sets heightRatio and widthRatio
},
pxHeight(value) {
  //sets heightRatio and widthRatio
}

我希望用戶能夠更改比率，這些更改應反映像素並更新它們。 當然，他也可以選擇更改像素，這反映了比率。

Answer 1

而不是觀察者，你應該使用計算對象。

這是基本的例子。

 <script src="https://vuejs.org/js/vue.js"></script> <div id="app"> <strong>Ratio</strong>: {{whRatio}} </div> <script> var vm = new Vue({ el: '#app', data: { width: 16, height: 9 }, computed: { whRatio () { return this.width / this.height } } }); </script> 

Answer 2

你不能只將這四個值作為數據返回到組件中，並且因為你使用v模型，每當用戶更改這些值時，它會調用一個更新所有計算的函數，它應該更新所有內容。

我會想到計算屬性/ getter和setter會有效。