当引用与计算中相同的键时，Vue 计算会抛出“渲染中的错误：“内部错误：递归过多””

Question

我是 Vue 的新手。我想知道计算中的函数被调用了多少次，所以我写了这个组件：const ComputedCounter = {    name: "ComputedCounter",    template: `        <span>{{ value }}</span>    `,    computed: {        value() {            const current = this.value || 0;            return current + 1;        }    }}但是，会抛出“渲染错误：“内部错误：递归过多””错误。我很困惑，这里发生了什么，有没有办法使这项工作？

Answer 1

如果您阅读文档：

计算属性仅在其某些反应性依赖项发生更改时才会重新评估。

这意味着如果您的值this.value发生变化，那么您的计算属性将被执行。但问题是，如果您执行您更改的计算属性value。现在因为值已经改变，你再次执行你的计算属性，因为这value已经改变了，女巫再次导致你的计算属性再次被执行，依此类推，我希望你能得到它。

Answer 2

我在您的递归中看不到停止条件
太多递归相当于超出最大调用堆栈大小
所以这是 js 问题而不是 vue

Answer 3

在您的数据中，设置：

_value: 0

那么你可以在你的 value() 方法中引用 this._value ：

value() { 
   return this._value++;
   }