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

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

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

以及一个vuetify数据表，其中包含约500个对象

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

这将使4个呼叫中的3个便宜，但在另一个vue上，我需要计算的道具进行实时更新，因为它所依赖的道具已更新。现在我被困在做这种傻事

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

我怎样才能摆脱这一团糟

---

嗯，也许这对其他人有用：

我搞不懂为什么会有这么多人打电话来

我不明白为什么数据表会构建dom中的所有内容，甚至是用户可能永远不会分页的内容

我修复了我的对象（有时）缓存昂贵的计算

// 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

// in constructor
this.cacheProps = true

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