大量对象的 Vuetify 数据表速度慢

Question

我有一个带有计算属性的自定义对象...

class MyObject {
  get someComputedProp() {
    // expensive computation based on some other props
  }
}

以及一个包含约 500 个此类对象的 vuetify 数据表

<v-data-table
  :headers="headers"
  :items="myObjects"
  :search="search"
>
  <template slot="items" slot-scope="{ item }">
    <td>{{ item.someComputedProp }}</td>
...

数据表加载速度很慢。实验时，我发现我昂贵的 getter 在整个表中每个对象被调用了大约 4 次。如果我用返回字符串文字替换昂贵的 getter 的代码，我的表很快。这带来了一些问题：

1. 为什么每行调用 getter 这么多次？
2. 表格有分页，即使我的 getter 必须每行调用 4 次，为什么必须为每一行调用它，即使是那些不在当前页面上的？

3. 我可以让我的对象缓存昂贵的计算...

   get someComputedProp() {
     if (!this._cachedComputedProp)
       this._cachedComputedProp = // expensive computation based on some other props
     }
     return this._cachedComputedProp
   }
   

   这将使 4 个调用中的 3 个调用便宜，但在另一个 vue 上，我需要计算的 prop 实时更新，因为它依赖的 props 已更新。现在我被困在做这种愚蠢的事情......

   set propThatComputedPropDependsOn (value) {
     this._cachedComputedProp = null
     this._propThatComputedPropDependsOn = value
   }
   

   4. 我该如何摆脱这个烂摊子？

Answer 1

好吧，也许这对其他人有用：

1. 我不明白为什么 getter 被调用了这么多次
2. 我不明白为什么数据表会在 dom 中构建所有内容，甚至是用户可能永远不会分页到的内容

3. 我将我的对象修复为（有时）缓存昂贵的计算。

   // in constructor
   this.cacheProps = true
   
   get someComputedProp() {
     if (!this._cachedComputedProp || !this.cacheProps)
       this._cachedComputedProp = // expensive computation based on some other props
     }
     return this._cachedComputedProp
   }
   

在我的编辑器中，当我希望计算的道具具有响应性时，我在正在编辑的对象上将 cacheProps 设置为 false。

Answer 2

取决于标头的配置。您可能需要将某些列显式设置为不可排序/不可搜索。这可能是该属性被多次访问的原因。