Cause of the problem:

Recently, WHEN I was working on a project, I encountered a problem about the running time sequence of $emit event and watch monitoring. The associated interface is called first, which returns the basic message and emits a method to change the value of the index (when there is an index), which has no data yet because initInfoData() has not been run, in which the index data from the reliBill interface is assigned. Then run refresh watch monitor, watch monitor used reliBill interface index data, index data usedMoney is null. Therefore, the basic information clearly shows the amount of loan, but the amount in the index is always 0

The solution

Separate the code from the setBudgetTotal $Bus emit event and encapsulate it into a method that is also called in initInfoData() and in the setBudgetTotal emit event.

The code is as follows:


methods: {initInfoData(_data, type) {
          _data = this.changeBgItem(_data)
          if (type === 'relibill') {
            let bugetData = this.eRDataTable5 ... Omit other code// Call the first time to change the value of the index used this time
              this.setBudgetUsedMoney(this.expMoney)
            }
          } else{}},receiveData(){
        this.$Bus.$on('setBudgetTotal'.val= > {
            this.expMoney = val
            // Ensure that the linkage indicator is invoked for the second time when modifying the loan amount of basic information
            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()
      }
    },
}
Copy the code

Conclusion:

It comes down to the timing of the lifecycle trigger. The phase between new Vue() and Created is called the initialization phase. This phase is about initializing properties, events, and reactive data on vue.js instances. Such as props — – > the methods — — — — — > data — – > computed — — — — — > watch — — — — > dojo.provide — — — — > inject.

But the above problem is still a little different from the initialization problem. The initInfoData() method is used to link the value of the index to the initInfoData() method of the reliBill interface. The initInfoData() method is used to link the value of the index to the initInfoData() method of the reliBill interface. In this case, usedMoney is null, so the index amount is 0. Therefore, we need to link this. ExpMoney emitted from the basic information again.