如何让 Vuetify v-for 渲染更快答案

【问题标题】：How to make Vuetify v-for render faster如何让 Vuetify v-for 渲染更快
【发布时间】：2021-03-21 11:32:05
【问题描述】：

你好，我是 vuejs 和 vuetify 的新手，我现在想显示大约 400 列和 6 行的项目，colum_id (cid) 和 row_id(rid) 但渲染速度很慢对不起，我知道如何提高这个循环性能谢谢事前：

<v-layout>
      <div class="reglahan-table-result-betting">
        <tr
          v-for="i in 6"
          :key="i">
          <td
            v-for="j in 60"
            :key="j">
            <div
              v-for="(item, k) in props.resultBetting"
              :key="k">
              <span
                v-if="Number(item.cid) === j && Number(item.rid) === i"
                :class="item.color"
              />
            </div>
            <span class="no-circle" />
          </td>
        </tr>
      </div>
    </v-layout>

【问题讨论】：

你有一个三重嵌套循环，很难让它非常高效，而且你拥有的数据越多，它得到的速度就越慢。也许重构是为了帮助降低这种复杂性
400 列？我看到 60 列。最里面的循环看起来也很奇怪。您为resultBetting 中的每个项目呈现一个div，但除了与当前列/行索引对应的一个之外，所有项目都是空的。为什么？
According to the documentation，您可以通过删除 :key 来提高性能。但是你必须意识到副作用。重新排序元素将不再可能。

标签： html vue.js for-loop vuetify.js v-for

【解决方案1】：

当然你可以优化它。问题是在你最内部的循环中，你循环数组的每个元素。你不应该那样做。

首先你需要正确索引你的表，我会创建一个这样的“计算”函数：

computed: {
  indexedResultBetting: function () {
    let ret = {}
    self.props.resultBetting.forEach(function(item, index){
      if(!item.rid in ret)
        ret[item.rid] = {}
      ret[item.rid][item.cid] = item.color
    })
    return ret
  }
}

然后你可以简单地用类似的东西来展示它：

<v-layout>
  <div class="reglahan-table-result-betting">
    <tr
      v-for="i in Object.keys(indexedResultBetting)"
      :key="i">
      <td
        v-for="j in Object.keys(indexedResultBetting[i])"
        :key="j">
        <div          
          <span
            :class="indexedResultBetting[i][j]"
          />
        </div>
        <span class="no-circle" />
      </td>
    </tr>
  </div>
</v-layout>

我还没有测试过，肯定有一些修补工作要做。

【讨论】：

感谢您的分享，您的代码加载速度比之前快了 3 到 4 倍，但问题是显示数据不正确，所有数据显示为一行。谢谢