[Vuejs]-Vue method executes a large number of times during rendering

by

0👍

✅

I assume the counting up to 6 isn’t a big surprise. The nested loops go through 6 items in total so count() is called 6 times.

The difficulty is when you manipulate data inside count, like this:

this.compteurAlbum=this.compteurAlbum+1;

The right-hand portion reads the current value of compteurAlbum. Reading a reactive property value during rendering creates a dependency on it. The left-hand portion then assigns a new value to compteurAlbum. This will trigger any dependants on that property, including the rendering of this component. The component will be added to the render queue for the next tick. The rendering that is ongoing in the current tick will still continue but once everything is complete in the current tick it will move on to the next tick and re-render the component. This causes a potentially infinite loop of rendering.

The key section of the Vue source code is here:

https://github.com/vuejs/vue/blob/78c3ce0ce0c2230f657cb7772a84fc7aa7ce0825/src/core/observer/scheduler.js#L99

Notice two things:

  1. In a dev build it will only go round the re-rendering loop MAX_UPDATE_COUNT times. That value is 100. That’s why you get ~600 extra calls to count(). In production it would just keep going.
  2. There’s a warning logged out, You may have an infinite update loop in a component render function. You should see that warning in your browser’s console log.

Leave a comment