Vue中的多依赖变量

Question

实现相互依赖的多个可变变量的最简单方法是什么？

例如，我们有折扣前的价格，不能改变，我们可以：

1. 适用折扣，折扣后的价格应更新，
2. 或折扣后更改价格，折扣应相应更新。

我为这个示例提供了以下解决方案：https://jsfiddle.net/2wh6cgq5/1/

不需要为每个@input事件创建单独的处理程序并应用v-model指令，就能做到这一点吗？

Answer 1

一种选择是使用具有计算属性的v模型绑定，这样您就可以控制集合逻辑。

new Vue({
  el: '#app',
  
  data: {
    priceBeforeDiscount: 100,
    discount: 50,
    priceAfterDiscount: 50,
  },
  
  computed: {
    priceAfterDiscountInput: {
      get() {
        return this.priceAfterDiscount;
      },
      set(val) {
        this.priceAfterDiscount = val;
        this.discount = this.priceBeforeDiscount - this.priceAfterDiscount;
      }
    },
    discountInput: {
      get() {
        return this.discount;
      },
      set(val) {
        this.discount = val;
        this.priceAfterDiscount = this.priceBeforeDiscount - this.discount;
      }
    }
  },
})

另一种可能是在discount和priceAfterDiscount上使用观察者。在这种情况下，它不会导致无限循环，因为值达到平衡，观察者只有在值发生变化时才运行。不过，总的来说，我对使用共同依赖的观察者持谨慎态度。

new Vue({
  el: '#app',
  
  data: {
    priceBeforeDiscount: 100,
    discount: 50,
    priceAfterDiscount: 50,
  },
  
  watch: {
    discount() {
        this.priceAfterDiscount = this.priceBeforeDiscount - this.discount;
    },
    priceAfterDiscount() {
        this.discount = this.priceBeforeDiscount - this.priceAfterDiscount;
    }
  },
})

然而，我并不认为你的解决方案有什么问题。如果不需要使用v-model指令(例如，对vee-验证)，我只需将其转换为v-bind并在输入处理程序中执行赋值。