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

  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
    }
    
    1. Как мне выбраться из этого беспорядка?
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
3 549
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

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

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

Другие вопросы по теме