我有一个 v-for 循环，可以多次渲染 ChessGame 组件。然而，ChessGame 组件比较复杂，加载时间较长，每个组件需要数百毫秒，并且循环渲染数十个组件。所以网站总是卡住几秒钟，什么也没有显示，然后才显示所有游戏。
是否有提示我可以让 Vue 在每次迭代后重新渲染，以便页面慢慢填充它们？或者 Vue 模板的工作方式不支持这一点？
<ul v-for="(game, index) in competitions[selected_competition].games" v-bind:key="game.pgn">
<div>
<h4>Game {{ index+1 }}</h4>
<ChessGame :id="'board_' + index" :ref="'board_' + index" :gameinfo="game" style="width: 400px"></ChessGame>
</div>
</ul>
最佳答案
Is there a hint that I can give Vue to rerender after each iteration, so that the page slowly fills with them?
据我所知，vue 中没有这样的功能来缓慢显示您的数据，尽管在数据准备好之前您可以做的是显示骨架加载器。
这是一种现代方法，几乎每个大公司都使用这种技术，以指示某些内容正在加载，直到我们提供数据。
我建议您从 vuetify 检查这一点: https://vuetifyjs.com/en/components/skeleton-loaders/
关于javascript - Vue : Render v-for incrementally?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65665146/