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 })