Javascript 其他字段更改时更新一个字段-Vue

我试图创建一个双向计算器，我选择使用英寸到毫米作为例子

请参见此处的沙箱：

导出默认值{
数据（）{
返回{
英寸：“，
嗯:“，
};
},
观察：{
英寸：功能（newVal）{
该值为0.mm=newVal*25.4；
},
mm：函数（newVal）{
这1.4英寸=新值/25.4；
},
},
};

问题从毫米到英寸。我不完全确定发生了什么，但这似乎是某种反馈循环。我知道我可以使用computed来实现这个特定的功能，但我更喜欢使用watchers，因为我的项目中的“watched”字段有更多的逻辑

---

这使用米到公里，完成了同样的事情，但我不确定毫米到英寸为什么会产生“反馈回路”效应，你可以做的是创建一个安全阀来防止再次发生。比如：

export default {
  data() {
    return {
      isChangingMm: false,
      isChangingInches: false,
      // others
    }
  },
  watch: {
    inches: function (newVal) {
      if (!this.isChangingMm) {
        this.isChangingInches = true
        this.mm = newVal * 25.4
        this.isChangingInches = false
      }
    },
    mm: function (newVal) {
      if (!this.isChangingInches) {
        this.isChangingMm = true
        this.inches = newVal / 25.4
        this.isChangingMm = false
      }
    }
  },
}

---

当您从25.4更改为4时，它可以工作，这表明JS存在浮点数问题。您可能希望研究计算的getter和setter，而不是watchers。如果JS存在问题，那么computed属性是否也会出现问题？如果使用计算的getter和setter，则不会出现这种情况，这样可以避免陷入无限递归。您的问题是，在使用观察程序时，返回的值总是有点偏离，并且不是严格等价的，这会导致观察程序修改彼此的观察值，从而导致递归。@Terry我理解。我在一个更大的流程的一部分中至少有12个字段，所以我希望避免为每个字段编写getter和setter的冗长。

export default {
  data() {
    return {
      isChangingMm: false,
      isChangingInches: false,
      // others
    }
  },
  watch: {
    inches: function (newVal) {
      if (!this.isChangingMm) {
        this.isChangingInches = true
        this.mm = newVal * 25.4
        this.isChangingInches = false
      }
    },
    mm: function (newVal) {
      if (!this.isChangingInches) {
        this.isChangingMm = true
        this.inches = newVal / 25.4
        this.isChangingMm = false
      }
    }
  },
}