【vue】vue同时监听两个参数（A和B）

前言

vue同时监听表单里面的A和B
A修改时，计算B的值，然后修改B
B修改时，计算A的值，然后修改A

场景

我现在监听form表单里面的growth和rate。
如果只是单纯的加上watch监听，那么触发当A修改时，在逻辑里面修改B的值，会再次触发A的修改。
打印结果如下：

这是一个问题；
并且还存在一个问题：
每次修改后，因为重新计算赋值，焦点始终存在于你当前修改的值的末尾。

解决办法

加一个标记。

这是两个输入框，给他们加@focus事件。鼠标点击哪个，就把当前参数的名称当做变量保存起来。
然后在逻辑里面判断。
比如修改A：
当鼠标点击进去的时候，会触发focus事件，把当前变量保存起来。然后再watch里面监听的A值逻辑加判断。只有currentTarget 等于变量A，才执行逻辑。
在B里面也加这个判断。这样就可以解决上述问题了。

代码示例
具体如下：
html

<el-form-item label="日利率" prop="dayRate">
  <el-input v-model="form.dayRate" placeholder="请输入成长值回报日利率" clearable @focus="currentFocus('dayRate')" ></el-input>
</el-form-item>
<el-form-item label="年度成长值" prop="empowerGrowth">
  <el-input v-model="form.empowerGrowth" placeholder="请输入年度成长值回报" clearable @focus="currentFocus('empowerGrowth')" ></el-input>
</el-form-item>

js

currentFocus(target) {
    
    
  this.currentTrigger = target
}

watch

'form.dayRate': {
    
    
      handler: function (newVal, oldVal) {
    
    
        if (this.dialogVisible && (this.currentTrigger === 'dayRate')) {
    
    
          let temp
          if (this.form.hasEmpowerNumber) {
    
    
            temp = this.form.empowerMoney * newVal * 365 * this.form.hasEmpowerNumber
          } else {
    
    
            temp = this.form.empowerMoney * newVal * 365
          }
          this.$set(this.form, 'empowerGrowth', temp)
          this.form.setupType = 2
        }
      },
      immediate: false,
      deep: true
    },
    'form.empowerGrowth': {
    
    
      handler: function (newVal, oldVal) {
    
    
        if (this.dialogVisible && this.form.empowerMoney !== 0 && this.currentTrigger === 'empowerGrowth') {
    
    
          let temp
          if (this.form.hasEmpowerNumber) {
    
    
            temp = newVal / this.form.empowerMoney / 365 / this.form.hasEmpowerNumber
          } else {
    
    
            temp = newVal / this.form.empowerMoney / 365
          }
          this.$set(this.form, 'dayRate', dayRateFormat(temp, 5))
          this.form.setupType = 1
        }
      },
      immediate: false,
      deep: true
    }