Перерендеринг всех элементов в списке
Я использую 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 перерисовывает все, если ключи остаются старыми? И как это исправить?