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

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

这是基本的例子。

＆＃13;

<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>

＆＃13;

Answer 2

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

我原本以为计算属性/ getter和setter都会有效。

Vue.js观察者触发一个无限循环

2 个答案: