Vue.createApp({
data() {
return {
counter: 0
}
},
template: '<div>{{counter++}}</div>'
}).mount('#root')
Finally, this code shows 101 on the page. Does someone know the detail about this?
The reason your counter
variable is rendered as 101 and not 1 is because you have a side-effect in your template. When template is rendering the counter
is incremented, Vue registers the change and trigger rendering again ...it is simply an infinite loop
The reason this infinite loop is not so infinite but stops after 101 iterations lies in the fact that Vue internally checks for such situation and throws an error (which you should see in browser dev tools console). Condition for throwing an error is number_of_iterations > RECURSION_LIMIT
where RECURSION_LIMIT
is set to 100
Error:
Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.