Блог

Я использую компонент таблицы данных, который я создал много лет назад, который отображает 2-мерный массив. Я могу сортировать, разбивать на страницы, фильтровать столбцы. Все это работает очень быстро. Недавно я рискнул использовать webpack и создать соответствующий компонент .vue для моей таблицы данных. Обратите внимание на тот же код, но теперь производительность намного медленнее при выполнении сортировки, подкачки и фильтрации. Есть ли что-то с webpack, что приводит к значительному снижению производительности reactivity?

Простой пример кода —

 <table>
  <tr v-for="row in pagedData">
    <td v-for="column in columns">
      {{row[column.property]}}
    </td>
  </tr>
</table>
  

Оказывается, проблема была связана с Google Chrome. Я исчерпал все возможности (узнал намного больше о виртуальном DOM, чем мне, вероятно, было нужно), я попробовал страницы в Edge и Firefox, которые не показали задержки. Быстрая переустановка Chrome устранила эту проблему. Просто примечание, которое я здесь прочитал, что использование vue SFC приводит к снижению производительности, поскольку компиляция происходит во время выполнения. Может быть, я неправильно понимаю, что означало это предложение.