VUE的一个数据绑定与页面刷新相关的bug

1.场景：

　　N层嵌套的循环查询业务场景，框架是vue。其中在最后一层查完之后，还需要查其中每一项的两个属性，类型都是列表。查完之后将其赋值给一个变量用于页面展示。代码如下：

　　（1）异常代码：

getStepRequirement(contentService) {
      this.contentLoading = true
      fetchStepRequirement({
        id: contentService.contentId
      }).then(res => {
        this.contentLoading = false
        if (res.data.code === 200) {
          if (res.data.result) {
            res.data.result.forEach(requ => {
            // 拼出要求
              requ['requirementDetail'] = requ.stepRequirementName.replace('%%', requ.stepRequirementData)
            })
          }
          contentService['requirementList'] = res.data.result || []
         
        } else {
          this.$message({ type: 'error', message: res.data.msg })
        }
      })
    }

this.contentLoading = true
      fetchStepContent(param).then(res => {
        this.contentLoading = false
        if (res.data.code === 200) {
          step['contentList'] = res.data.result || []
          step.contentList.forEach(content => {
            content.contentServiceLinks.forEach(contentService => {
              contentService['requirementList'] = []
              this.getStepRequirement(contentService)
             switch (contentService.serviceTypeCode.toLowerCase()) {
            case 'homework':
              contentService['homeworkList'] = []
              this.getAssignhomeworkById(contentService)
              break
            case 'comment':
              break
            case 'course':
              break
          }
            })
          })
        } else {
          this.$message({ type: 'error', message: res.data.msg })
        }
      })
      this.showingContent = step

　　（2）正常代码：

const param = {
        flag: false,
        id: step.id
      }
      // 是否选课标志
      if (step.stepTypeCode === 'PSTD1') param.flag = true
      this.contentLoading = true
      fetchStepContent(param).then(res => {
        this.contentLoading = false
        if (res.data.code === 200) {
          step['contentList'] = res.data.result || []
          step.contentList.forEach(content => {
            content.contentServiceLinks.forEach(contentService => {
              contentService['requirementList'] = []
              this.getStepRequirement(contentService)
            })
          })
        } else {
          this.$message({ type: 'error', message: res.data.msg })
        }
      })
      this.showingContent = step


getStepRequirement(contentService) {
      this.contentLoading = true
      fetchStepRequirement({
        id: contentService.contentId
      }).then(res => {
        this.contentLoading = false
        if (res.data.code === 200) {
          if (res.data.result) {
            res.data.result.forEach(requ => {
            // 拼出要求
              requ['requirementDetail'] = requ.stepRequirementName.replace('%%', requ.stepRequirementData)
            })
          }
          contentService['requirementList'] = res.data.result || []
          switch (contentService.serviceTypeCode.toLowerCase()) {
            case 'homework':
              contentService['homeworkList'] = []
              this.getAssignhomeworkById(contentService)
              break
            case 'comment':
              break
            case 'course':
              break
          }
        } else {
          this.$message({ type: 'error', message: res.data.msg })
        }
      })
    }

　　2.原因分析　　

首先赋值那里，会将showingContent 和step绑定，后边step发生变化之后，会同步变化到showingContent （浅复制问题，不再解释）。但是异常代码中homeworkList和requirementList是并列关系相互独立的，这很符合我们平常的思维模式。但是实际运行结果是，时而只显示了homework，时而只显示了requirement，又时而能都显示出来。具体深层原因暂不完全确定，有知道根本原因的大佬欢迎指教。个人猜想是页面刷新机制方面的问题。因为数据已经都正确了，但是页面未完全刷新。

　　3.解决方法

　　解决也有两个：一个就是上边（2）的代码，将其写成依赖关系，实测有效。一个就是在html的相应位置加v-if，然后在查询返回homework和requirement之后分别进行重置if条件来强制刷新。

强制刷新关键代码：

this.xxx = false
this.$nextTick(() => { this.xxx = true })