VUE的一個數據綁定與頁面刷新相關的bug

1.場景：

　　N層嵌套的循環查詢業務場景，框架是vue。其中在最後一層查完以後，還須要查其中每一項的兩個屬性，類型都是列表。查完以後將其賦值給一個變量用於頁面展現。代碼以下：

　　（1）異常代碼：

 1 getStepRequirement(contentService) {
 2       this.contentLoading = true
 3       fetchStepRequirement({
 4         id: contentService.contentId
 5       }).then(res => {
 6         this.contentLoading = false
 7         if (res.data.code === 200) {
 8           if (res.data.result) {
 9             res.data.result.forEach(requ => {
10             // 拼出要求
11               requ['requirementDetail'] = requ.stepRequirementName.replace('%%', requ.stepRequirementData)
12             })
13           }
14           contentService['requirementList'] = res.data.result || []
15          
16         } else {
17           this.$message({ type: 'error', message: res.data.msg })
18         }
19       })
20     }
21 
22 this.contentLoading = true
23       fetchStepContent(param).then(res => {
24         this.contentLoading = false
25         if (res.data.code === 200) {
26           step['contentList'] = res.data.result || []
27           step.contentList.forEach(content => {
28             content.contentServiceLinks.forEach(contentService => {
29               contentService['requirementList'] = []
30               this.getStepRequirement(contentService)
31              switch (contentService.serviceTypeCode.toLowerCase()) {
32             case 'homework':
33               contentService['homeworkList'] = []
34               this.getAssignhomeworkById(contentService)
35               break
36             case 'comment':
37               break
38             case 'course':
39               break
40           }
41             })
42           })
43         } else {
44           this.$message({ type: 'error', message: res.data.msg })
45         }
46       })
47       this.showingContent = step

 

　　（2）正常代碼：

 1 const param = {
 2         flag: false,
 3         id: step.id
 4       }
 5       // 是否選課標誌
 6       if (step.stepTypeCode === 'PSTD1') param.flag = true
 7       this.contentLoading = true
 8       fetchStepContent(param).then(res => {
 9         this.contentLoading = false
10         if (res.data.code === 200) {
11           step['contentList'] = res.data.result || []
12           step.contentList.forEach(content => {
13             content.contentServiceLinks.forEach(contentService => {
14               contentService['requirementList'] = []
15               this.getStepRequirement(contentService)
16             })
17           })
18         } else {
19           this.$message({ type: 'error', message: res.data.msg })
20         }
21       })
22       this.showingContent = step
23 
24 
25 getStepRequirement(contentService) {
26       this.contentLoading = true
27       fetchStepRequirement({
28         id: contentService.contentId
29       }).then(res => {
30         this.contentLoading = false
31         if (res.data.code === 200) {
32           if (res.data.result) {
33             res.data.result.forEach(requ => {
34             // 拼出要求
35               requ['requirementDetail'] = requ.stepRequirementName.replace('%%', requ.stepRequirementData)
36             })
37           }
38           contentService['requirementList'] = res.data.result || []
39           switch (contentService.serviceTypeCode.toLowerCase()) {
40             case 'homework':
41               contentService['homeworkList'] = []
42               this.getAssignhomeworkById(contentService)
43               break
44             case 'comment':
45               break
46             case 'course':
47               break
48           }
49         } else {
50           this.$message({ type: 'error', message: res.data.msg })
51         }
52       })
53     }

　　2.緣由分析　　

首先賦值那裏，會將showingContent 和step綁定，後邊step發生變化以後，會同步變化到showingContent （淺複製問題，再也不解釋）。可是異常代碼中homeworkList和requirementList是並列關係相互獨立的，這很符合咱們日常的思惟模式。可是實際運行結果是，時而只顯示了homework，時而只顯示了requirement，又時而能都顯示出來。具體深層緣由暫不徹底肯定，有知道根本緣由的大佬歡迎指教。我的猜測是頁面刷新機制方面的問題。由於數據已經都正確了，可是頁面未徹底刷新。

　　3.解決方法

　　解決也有兩個：一個就是上邊（2）的代碼，將其寫成依賴關係，實測有效。一個就是在html的相應位置加v-if，而後在查詢返回homework和requirement以後分別進行重置if條件來強制刷新。

強制刷新關鍵代碼：

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