计算属性相互依赖，在 Vue 1 和 2 上具有不同的行为

Question

我遇到了一个问题，我有一个带有格式化数字的输入框，每个输入框都包含一个计算属性。当我更改输入时，Vue 会自动重新计算数字，我将无法准确输入我需要的内容。这只发生在 Vue 2 中。

new Vue({
  el: '#vue-app',

  data: function() {
    return {
      direction: 'hi',
      target: 49.99,
      maxRoll: Big(99.99),
      oddsDividend: Big(100),
    }
  },
  watch: {
    direction: function() {
      this.target = this.maxRoll.minus(this.target).abs()
    }
  },
  computed: {
    chance: {
      get: function() {
        return this.direction === 'hi' ?
          this.maxRoll.minus(this.target).toFixed(2) :
          Big(this.target).toFixed(2)
      },
      set: function(newValue) {
        this.target = this.direction === 'hi' ?
          this.maxRoll.minus(newValue).toFixed(2) :
          Big(newValue).toFixed(2)
      }
    },
    odds: {
      get: function() {
        return this.direction === 'hi' ?
          this.oddsDividend.div(this.maxRoll.minus(this.target)).toFixed(4) :
          this.oddsDividend.div(this.target).toFixed(4)
      },
      set: function(newValue) {
        this.target = this.direction === 'hi' ?
          this.oddsDividend.div(newValue).minus(this.maxRoll).abs().toFixed(2) :
          this.oddsDividend.div(newValue).toFixed(2)
      }
    },
  }
});

例如，这里有一个 Vue 2 的小提琴：https://jsfiddle.net/fc4b60n3/ 尝试在第二个输入框中键入数字 234 或任何其他数字。它只会捕获第一个数字并以此执行所有计算。

现在使用 Vue 1：https://jsfiddle.net/fc4b60n3/1/ 在这里您可以输入完整的数字，例如234 并且只有当您失去输入焦点时，它才会重新计算自己的计算属性。这是我想要的行为，但我必须使用 Vue 1，它与我当前的设置不兼容。

所以我的问题是。这些 Vue 版本之间发生了什么变化导致了这种情况？如何使用 Vue 2 让代码像我想要的那样工作？

编辑论坛帖子，以保持一切同步：https://forum.vuejs.org/t/96370

Answer 1

我认为 v-model 在 v1 上使用 onchange 事件（等到失去焦点然后改变） 在 v2 上，它使用 oninput 事件（只要你输入一个新行）

所以要修复您的代码，请使用v-bind:value 和onChange event 来设置该值而不是v-model