У меня есть пользовательский объект с вычисляемым свойством...
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 раза для каждого объекта во всей таблице. Если я заменю код моего дорогого геттера на возврат строкового литерала, моя таблица будет быстрой. Это вызывает некоторые вопросы:
Я могу заставить свой объект кэшировать дорогостоящие вычисления...
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
}
Ну, может быть, это будет полезно кому-то еще:
Я исправил свои объекты, чтобы (иногда) кэшировать дорогостоящие вычисления.
// 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
для редактируемого объекта.
В зависимости от конфигурации заголовков. Возможно, вам придется явно указать некоторые столбцы как недоступные для сортировки/поиска. Это может быть причиной многократного обращения к свойству.