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