Javascript Vue.js监视程序触发一个有限循环

我正在构建一个方面定量计算器。 如果我有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
}

---

我希望用户能够更改比率，这些更改应该反映在像素上并更新它们。当然，他也可以选择改变像素，这反映在比率上。

你应该使用计算对象，而不是观察者

这是一个基本的例子

比率：{{whRatio}
var vm=新的Vue({
el:“#应用程序”，
数据：{宽度：16，高度：9}，
计算：{
WHR比率（）{
返回this.width/this.height
}
}
});

您是否可以将这4个值作为组件中的数据返回，并且因为您使用的是v型，所以每当用户更改这些值时，它都会调用一个函数来更新所有计算，并且应该更新所有内容

---

我本以为计算属性/getter和setter会起作用。

不要使用watchers还有其他有效的方法吗？您是从输入中获取值变量还是什么？是的，从输入字段中获取4个值，在每一个上使用一个v型模型。我会在输入上使用类似于

v-on:change

的东西，或者使用带有“计算”按钮的“

v-on:click

。然后用普通方法计算比率。计算的属性也帮不了我。它们还导致堆栈溢出。问题是，我希望用户能够更改比率，这些更改应该反映在像素上并更新它们。当然，他也可以选择改变像素，这反映在比率上。你能在js fiddle上分享你的代码吗？通常，$数据不会得到infitnite循环。它可能是另一个触发它的代码块。