Vue: RangeError: Maximum call stack size exceeded

[sandipbiswasbehala]

Version

2.6.11

Reproduction link

https://jsfiddle.net/rwg4k2ns/

not working only in chorme desktop 81.XXX. working in firefox,edge , mobile chrome.

Steps to reproduce

Below snippet in .js file not working and getting RangeError: Maximum call stack size exceeded
v-for="n in 200000"
:key="n">Hello World {{ n }}

Workig : no error
v-for="n in 100000"
:key="n">Hello World {{ n }}

What is expected?

list will be shown

What is actually happening?

getting RangeError: Maximum call stack size exceeded

[sandipbiswasbehala]

please comment back any one form vue team

[albertodeago]

@sandipbiswasbehala I don't think opening an issue and asking the same day for a response is nice.
Anyway, you're saying the problem is trying to show 200,000 items...
That's a large amount of items to render... Have you considered using a virtual scroller like this or this?

[mhrabiee]

@sandipbiswasbehala As @albertodeago mentioned, it's not really a good idea to render such a large amount of items and it's better to change your UI design and/or architecture, however you can fix this particular issue simply putting your items inside a parent element.

So instead of:

var app = new Vue({
  el: '#app',
  template: `
  <div>
      <span>Details:</span>
      <div v-for="n in 200000" :key="n">Hello World {{ n }}</div>
  </div>
  `
});

You should use:

var app = new Vue({
  el: '#app',
  template: `
  <div>
      <span>Details:</span>
      <div>
          <div v-for="n in 200000" :key="n">Hello World {{ n }}</div>
      </div>
  </div>
  `
});

Working Example (Tested in Chrome Desktop 81 and Chrome Desktop 83)
https://jsfiddle.net/mhrabiee/g8n7er60/7

[sandipbiswasbehala]

@mhrabiee
thanks.

[mhrabiee]

This issue can be closed.

[czf1998]

please comment back any one form vue team

[czf1998]

This issue can be closed.
please comment back any one form vue team.

[chumager]

Hi, my problem as in #11675 is not trying to deploy several components who does the same, my problem is more like complex components who uses several other components so I don't need to show 200k components to crush, just change page on my table and the error is the same...

Even tough, it applies to the sum of components shown in the SPA, I've tested it with 20, 50 and 100 items per page and in all options it crush sooner or later when move between pages (in the table).

maybe my case is more memleak than the capacity of render components and in the edge case looks the same.

I've done several memory test and the DOM elements between pages keeps around 0 (X added and X deleted), but (array) and (closure) keeps growing.

I'll repeat the test and upload some screenshots, because the snapshots are around 0.5 GB.

Regards