vue.js - Vue 3 - number 0 increase (++) is not 1 but 101 in template , why?

Question

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?

Answer 1

1. 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

2. 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.