Vue：增量渲染 v-for？

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

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/

Vue：增量渲染 v-for？

Vue: Render v-for incrementally?

javascript

vue.js

vue-component

v-for