Vue.js 观察者触发无限循环答案

【问题标题】：Vue.js watchers trigger an inifinite loopVue.js 观察者触发无限循环
【发布时间】：2018-01-07 19:52:26
【问题描述】：

我正在构建一个纵横比计算器。 如果我有 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
}

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

【问题讨论】：

不要使用观察者
还有其他有效的方法吗？
您是从输入中获取值变量还是什么？
是的，从输入字段中获取 4 个值，并在每个值上使用 v-model。
我只会在输入上使用v-on:change 之类的东西，或者使用带有“计算”按钮的'v-on:click。然后使用常规方法计算比率。

标签： javascript vue.js runtime-error infinite-loop

【解决方案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>

【讨论】：

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

【解决方案2】：

你能不能只将这 4 个值作为组件中的数据返回，并且因为你使用 v-model，每当用户更改这些值时，它都会调用一个函数来更新所有计算并且它应该更新所有内容。

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

【讨论】：