Vue: The never-ending loop will cause a "call stack size exceeded" problem.

Created on 26 Dec 2016 · 4Comments · Source: vuejs/vue

Vue.js version

2.1.7

Reproduction Link

https://jsfiddle.net/Becavalier/hjdk9e5u/6/

Steps to reproduce

Just run the code.

What is Expected?

Throwing a warning or an error with accurate message.

What is actually happening?

[Vue warn]: Error when rendering root instance: 
Uncaught RangeError: Maximum call stack size exceeded
    at Vue$3.value (v-if,v-else,v-show.html:25)
    at Watcher.get (vue.js:1663)
    at Watcher.evaluate (vue.js:1771)
    at Vue$3.computedGetter [as value] (vue.js:1960)
    at Vue$3.value (v-if,v-else,v-show.html:25)
    at Watcher.get (vue.js:1663)
    at Watcher.evaluate (vue.js:1771)
    at Vue$3.computedGetter [as value] (vue.js:1960)
    at Vue$3.value (v-if,v-else,v-show.html:25)
    at Watcher.get (vue.js:1663)

Source

Becavalier

Most helpful comment

You are referencing a computed property inside itself - what else do you expect other than an infinite loop? The best we can do is warn you when you define a computed property that clashes with existing properties.

yyx990803 on 26 Dec 2016

👍9 👎6

All 4 comments

You have foo in data and computed property foo too.
Just rename it: https://jsfiddle.net/hjdk9e5u/7/

Alex-Sokolov on 26 Dec 2016

👍1

Yes, I know Vue will not pollute the raw data, but the error message is really weird, I think it is better to throw a much more friendly error message with accurate reason. Some beginners always make mistakes like this, but they do not know how to debug it.

Becavalier on 26 Dec 2016

👍5

yyx990803 on 26 Dec 2016

👍9 👎6

In case someone else comes here from Google, I was hitting something similar running unit tests but not when running the app normally.

I had created a normal computed property (no circular references), but also a a watch created for that computed property. As soon as I commented out the watch, the error went away and unit tests passed.

Something like: https://jsfiddle.net/x1jork9c/