Peculiar max call stack exceed

VueJS
1

http://jsfiddle.net/janat08/yMv7y/2760/

I thought I’d see how I can crash vue after reading tracker long-form guide. I’m happy to announce that I’ve “exceeded” myself.

2

Not very peculiar. a is referencing b, and b is referencing a :stuck_out_tongue:
Here’s a shorter example of an infinite loop:

computed:{
	a(){
		return this.b
	},
	b(){
		return this.a
	}
},
3

That’s silly, a isn’t returning anything, and even than my impression is that computed does a very poor job of tracking it’s dependencies, so I would imagine a wouldn’t run what so ever (if you for example where to reference v-model instead). I mean neither of them would log anything besides first run if you were to reference v-model without returning anything that has to do with it, or more specifically *exactly has to do with it- supposed v-model-, as apparently not having any side effects is a virtue vue “feels necessary” to impose.

4

If you’re not returning anything and just want side effects, you should use watch:{} instead of computed:{}.

5

The point is that under simple functions there’s no way to arrange similar code so that it would crash, and this doesn’t offer any extra functionality akin to tracker that would justify it crashing.

6 
computed: {
  a(){
    console.log(this.b)
    return 6
  },
  b(){
    for (let c; c<this.a; c++){
      console.log("sdf")
    }
    return
  }
}

Your a computed getter is accessing your b computed getter, which in turn is accessing a, and so on until you get basically what is a stack overflow. This is not Vue and has nothing to do with the values of a, b or any other of your variables, it is a general programming mistake. :stuck_out_tongue:

This infinite recursion problem could be summarized with this simple code:

function a () {
  b()
}

function b () {
  a()
}

a()
2 Likes