Vue 应用程序中的逻辑问题是由于相互依赖的变量而导致无限循环

Question

我正在开发一个 vue 应用程序，它可以从法定货币转换为加密货币，反之亦然。该应用的演示可以在这里找到：Demo。

您会注意到计算完成并在输入文本时自动显示在对面的输入框中。问题是目前该应用只监视绑定到输入的变量的变化。

当用户从选择框中选择另一个选项时，我还需要进行此计算。

我一直在努力思考如何在不导致无限循环的情况下实现这一点。

这是我天真的尝试：codepen。

目前我对为什么这不起作用的理解是：

...input1 changes -> watch input1 called -> watch input1 modifies 
input2 -> watch input2 called -> watch input2 modifies input1....

这是一个无限循环。一定有 Vue 的一部分我还不够熟悉来处理这个确切的问题。

谢谢，

Answer 1

使用@input 事件监听器。当您更改一个输入中的值时，已更改的输入将更新另一个输入的值。

<template>
  <div>
    <input v-model="value1" @input="update2"> 
    to 
    <input v-model="value2" @input="update1">
  </div>
</template>

<script>
const mul = 1.5;
export default {
  data: () => ({
    value1: null,
    value2: null
  }),
  methods: {
    update1() {
      this.value1 = this.value2 / mul;
    },
    update2() {
      this.value2 = this.value1 * mul;
    }
  }
};
</script>

您可以使用watch 来完成这项工作，但是您需要通过额外的检查来防止更新循环：

watch: {
  value1(val) {
    const tmp = val * mul;
    if (tmp !== this.value2) {
      this.value2 = tmp;
    }
  },
  value2(val) {
    const tmp = val / mul;
    if (tmp !== this.value1) {
      this.value1 = tmp;
    }
  }
},

但是这段代码假设乘以 x 然后除以 x 得到完全相同的数字，虽然这在数学上是正确的，但带有浮点数（javascript 的数字类型）您需要注意一些例外情况（NaN，舍入），这会使代码变得复杂。

因此我推荐输入事件监听器方法。