更改指示计算属性中索引的值时发生内存泄漏

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] 不同，因为它会相互比较字符串和数字。