Question

我有一个 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>

Answer 1

<块引用>

有没有提示我可以让 Vue 在每次迭代后重新渲染，以便页面慢慢填满它们？

据我所知，vue 中没有这样的功能来缓慢显示您的数据，尽管在您的数据准备好之前您可以做的是显示一个骨架加载器。

这是一种现代方法，几乎所有大公司都使用这种技术，以表明在我们提供数据之前正在加载某些内容。

我建议您从 vuetify 中查看： https://vuetifyjs.com/en/components/skeleton-loaders/

Vue：增量渲染 v-for？

1 个答案: