vue的$watch与数据修改时的触发时间先后问题

问题原因：

最近在做项目时，有遇到$emit事件与watch监听运行时间先后的问题。先调用关联的接口，此接口中会返回基本信息的内容，在基本信息中又emit了修改指标金额的方法（当有一条指标时），此时指标还没有数据，因为还没运行到initInfoData()，在这个方法中把reliBill接口中的指标数据赋值过来。然后运行refresh的watch监听，watch监听中用的reliBill接口的指标数据，指标数据中的usedMoney为null。所以就导致基本信息中明明有借款金额，但是指标中的金额总是0

解决方法

把setBudgetTotal的$Bus的emit事件中的代码抽离出来，封装成一个方法，在initInfoData()中也调用，在setBudgetTotal的emit事件中也调用。

代码如下：

methods:{
    initInfoData(_data, type) {
          _data = this.changeBgItem(_data)
          if (type === 'relibill') {
            let bugetData = this.eRDataTable5
            ...省略其它代码
            //在这里再次调用修改指标本次使用金额的值  调用第1次
              this.setBudgetUsedMoney(this.expMoney)
            }
          } else {
          }
        },
    receiveData(){
        this.$Bus.$on('setBudgetTotal', val => {
            this.expMoney = val
            //保证修改基本信息的借款金额时联动指标的本次使用金额  调用第2次
            this.setBudgetUsedMoney(val)
        })
    },
    setBudgetUsedMoney(val) {
      if (this.eRDataTable5.length === 1) {
        this.eRDataTable5[0].usedMoney = this.$moneyToDecimal(val)
        this.eRDataTable5 = JSON.parse(JSON.stringify(this.eRDataTable5))
        this.toSum()
      }
    },
}
复制代码

总结：

归根结底还是生命周期的触发时间先后问题。 new Vue()到created之间的阶段叫初始化阶段。这个阶段主要是在vue.js实例上初始化一些属性、事件及响应式数据。如props—-> methods —–> data—–> computed —–> watch —-> provide —-> inject。

但是上面的问题还是和初始化时的有些不同。基本信息组件在上面，先运行，而指标在下面后运行，因此当基本信息emit事件出去时，指标还没有数据，因此不会把指标的金额给联动起来，结果就走到了initInfoData()方法中了，直接把reliBill接口的中指标信息带过来了，而这里的usedMoney是null，所以指标金额就为0。因此需要再把基本信息中emit出去的this.expMoney再做一次联动。