vue RangeError:超出最大调用堆栈大小

vm0i2vca  于 2022-10-28  发布在  其他
关注(0)|答案(9)|浏览(344)

版本

2.6.11

复制链接

https://jsfiddle.net/rwg4k2ns/的最大值
不工作,只在chrome桌面81. xxx.工作在火狐,边缘,移动的铬。

重现步骤

.js文件中的以下代码段不起作用,并出现RangeError:超出最大调用堆栈大小
v-for=“200000中的n”
:key=“n”〉您好,世界{{ n }}
工作:无错误
v-for=“100000中的n”
:key=“n”〉您好,世界{{ n }}

需要什么?

将显示列表

到底发生了什么?

正在获取范围错误:超出最大调用堆栈大小

vtwuwzda

vtwuwzda1#

请回复任何一个前vue团队

aurhwmvo

aurhwmvo2#

@sandipbiswasbehala我不认为打开一个问题,并要求同一天的回应是好的。
不管怎样,你是说问题是要展示20万件物品...
这是一个大量的项目渲染...你有没有考虑使用虚拟滚动,如thisthis

carvr3hs

carvr3hs3#

@sandipbiswasbehala正如@albertodeago所提到的,渲染如此大量的项目并不是一个好主意,最好是改变UI设计和/或架构,但是,您可以通过将项目放在父元素中来解决这个特定问题。
所以改为:

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

您应该用途:

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>
`
});

工作示例(在Chrome Desktop 81和Chrome Desktop 83中测试)
https://jsfiddle.net/mhrabiee/g8n7er60/7的最大值

3npbholx

3npbholx4#

@姆赫拉比
谢谢你的好意。

bpsygsoo

bpsygsoo5#

此问题可以关闭。

af7jpaap

af7jpaap6#

请回复任何一个前vue团队

mm5n2pyu

mm5n2pyu7#

此问题可以关闭。
请回复任何一个前vue团队。

hjzp0vay

hjzp0vay8#

嗨,我的问题是在#11675不是试图部署几个组件谁做同样的,我的问题更像是复杂的组件谁使用几个其他组件,所以我不需要显示200k组件粉碎,只是改变我的表上的页面和错误是相同的...
即使坚韧,它适用于SPA中显示的组件的总和,我已经测试了它与20,50和100个项目每页,在所有选项中它粉碎迟早当页面之间移动(在表中).
也许我的情况是更多的内存泄漏比渲染组件的能力,并在边缘的情况下看起来一样。
我已经做了几个内存测试,页面之间的DOM元素保持在0左右(添加X和删除X),但(数组)和(闭包)不断增长。
我将重复测试并上传一些屏幕截图,因为快照大约为0.5 GB。
此致

vshtjzan

vshtjzan9#

我还遇到了这个“超出最大调用栈大小”的错误a-在一个使用vuetify v-data-table表的应用程序中。当表的底层数据被更新为包含大约1000行数据时(所以还不是绝对巨大),错误就会出现。错误是由Vue 2.6.12版本中vue.runtime.esm.js的第5997行引发的:
x1m0n1x
例如,the MDN documentation about the apply-function警告说,如果参数太多,它将溢出调用堆栈。
是否真的有必要在这里使用apply-function来代替传统的for循环或其他替代方法?对我来说,这看起来像是对Vue框架可以处理的插入节点数量的完全人为的限制。

相关问题