vue使用computed时Maximum call stack size exceeded
时间: 2023-11-21 11:58:34 浏览: 55
在Vue中,当使用computed属性时,如果在计算属性中使用了自身,就会出现Maximum call stack size exceeded的错误。这是因为计算属性的值依赖于自身,导致了无限递归调用。解决这个问题的方法是使用watch属性来监听数据的变化,然后在回调函数中更新计算属性的值。
以下是一个示例代码,其中count是一个响应式数据,computed属性doubleCount依赖于count,当count变化时,doubleCount会自动更新。
```html
<template>
<div>
<p>count: {{ count }}</p>
<p>doubleCount: {{ doubleCount }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
increment() {
this.count++;
}
},
watch: {
count() {
this.doubleCount = this.count * 2;
}
}
};
</script>
```