Vue：增量渲染 v-for？答案

【问题标题】：Vue: Render v-for incrementally?Vue：增量渲染 v-for？
【发布时间】：2021-04-16 07:04:12
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js vue-component v-for

【解决方案1】：

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

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

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

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

【讨论】：

我使用 setTimeout(this.process, 0) 推迟繁重的工作，效果很好