更改指示計算屬性中索引的值時發生記憶體洩漏

Question

我的計算屬性有問題

correctAnswersForCurrentStage(): object {return 
    return this.correctAnswers[this.currentLevel] ?? {};
},

一些背景： this. CorrectAnswers 是一個對象，其中屬性是級別，值是每個門的對象：

this.correctAnswers = {
     "1": {
        "1": 15,
        "2": 25,
        "3": 35,
        "4": 45
    },
    "2": {
        "1": 15,
        "2": 25,
        "3": 35,
        "4": 45
    },
}

所以當一個關卡完成後，我會增加關卡

this.currentLevel++

此後一切都會阻塞。我不知道是 Vue 還是 TypeScript 出現了這個問題。或者也許兩者的結合？ 有人知道為什麼會發生這種情況嗎？

我嘗試關閉等級的增加，然後就沒有問題了。顯然我一直保持在同一水平上。但其他重置邏輯有效

跟進：

當我更改它以便它不需要使用索引時，我仍然遇到相同的問題，現在我做到了：

correctAnswersForCurrentStage(): object {
    if (this.currentLevel === 1) {
        return this.correctAnswersForLevel1;
    }
    if (this.currentLevel === 2) {
        return this.correctAnswersForLevel2;
    }
    if (this.currentLevel === 3) {
        return this.correctAnswersForLevel3;
    }
    if (this.currentLevel === 4) {
        return this.correctAnswersForLevel4;
    }
    return {};
},

Answer 1

很難用目前提供的程式碼來判斷，但我懷疑 this. CorrectAnswersForLevel1 等也是計算屬性。這意味著您會得到一個循環引用，從而導致無限循環。

除此之外，程式碼還包含錯誤的參考： this. CorrectAnswers['1'] 與 this. CorrectAnswers[1] 不同，因為它會相互比較字串和數字。