Блог

У меня есть пользовательский объект с вычисляемым свойством…

 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 раза для каждого объекта во всей таблице. Если я заменю код для моего дорогостоящего средства получения на возврат строкового литерала, моя таблица будет быстрой. Это вызывает некоторые вопросы:

1. Почему средство получения вызывается так много раз в строке?
2. Таблица имеет разбивку на страницы, даже если мой метод получения должен вызываться 4 раза за строку, почему он должен вызываться для каждой строки, даже для тех, которых нет на текущей странице?

3. Я могу заставить свой объект кэшировать дорогостоящие вычисления…

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

   что сделает 3 из 4 вызовов дешевыми, но в другом vue мне нужно, чтобы вычисляемый реквизит обновлялся в режиме реального времени по мере обновления реквизитов, от которых он зависит. Теперь я застрял, делая эту глупость…

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

   4. Как мне выбраться из этого беспорядка?

Ну, может быть, это будет полезно кому-то еще:

1. Я не могу понять, почему геттеры вызываются так много раз
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 для редактируемого объекта.

В зависимости от конфигурации заголовков. Возможно, вам потребуется явно указать некоторые столбцы как недоступные для сортировки / поиска. Это может быть причиной, по которой к свойству обращаются несколько раз.