Vue：增量渲染 v-for？

Posted 2023-02-23

【中文标题】Vue：增量渲染 v-for？

【英文标题】：Vue: Render v-for incrementally?

【发布时间】：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>

【参考方案1】：

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

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

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

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

【讨论】：

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