Перерендеринг всех элементов в списке

Я использую Vue2, и хочу отобразить таблицу по куску данных (данные очень большие). Делаю так:

<tr v-for="(row) in rowData" :key="row.id" >
 <td v-for="(column) in columnData " :key="column.id" >
   {{ row[column.id] }}
 </td>
</tr>

rowData и columnData - это computed свойства:

    rowData() {
      return this.data.slice(this.rowScrollIndex, this.rowScrollIndex + this.currentRenderedItem)
    },
    columnData() {
      return this.columns.slice(this.columnsScrollIndex, this.columnsScrollIndex + 40)
    },

При определенных условиях (скролл) меняется индекс (this.rowScrollIndex/this.columnsScrollIndex), соответственно значения должны перерендериться.

Собственно вопрос: Каждый раз при изменение индекса все перерисовывается (т.е. все ячейки) - хотя ключи остаются валидными и без изменений, и вместо рендера 20 ячеек снизу происходит рендер всех. Поэтому вопрос - почему Vue перерисовывает все, если ключи остаются старыми? И как это исправить?


Ответы (0 шт):