Vue.js 对于一长串元素中的一个小更改，有没有办法加快渲染时间？

下面链接的示例显示了一个非常大的div网格列表（1000 x 20） 当单击一个div时，它将仅高亮显示该元素。然而， VueJS在重新招标中似乎有很大的开销，这会在单击时引入延迟

  <div class="row" v-for="row in rows">
    <div v-for="column in row.columns" :class="{red: isHighlighted(row,column)}" @click.prevent="setHighlighted({row: row.id, column: column.id})">
      <div>Value: {{column['value']}}</div>
    </div>
  </div>

值：{{column['Value']}

---

如果每个项目都有一个唯一的属性，如

id

，请将其传递给

：key=“item.id”

：

当然，您可以通过不做需要在每次更新时进行评估的事情来加快速度。在您的情况下，
类
设置必须在每次
行
或
列
更改时为每个框调用一个函数

我添加了
样式
作为列的一个成员，以便在突出显示时可以直接找到它，而不是要求每个单元格都注意到对
突出显示
的更改。然而，这仍然没有消除滞后

在做了一段时间之后，我猜测在每次更新时都会重新评估
：class
设置，即使它不是函数调用。我以前的解决方案明确地处理了类设置，从而避免了
：class
问题。此解决方案为每个单元使用一个组件，这避免了重新计算，因为组件仅在其道具更改时重新计算


const store=新的Vuex.store({
声明：{
行：[]，
行数：2000，
突出显示：{
行：空，
列：null
}
},
吸气剂：{
行（状态）{
返回state.rows；
},
行计数（状态）{
返回state.rowCount；
},
突出显示（状态）{
返回状态。突出显示；
}
},
突变：{
设置行（状态，行）{
state.rows=行；
},
设置突出显示（状态，突出显示）{
state.highlighted=突出显示；
}
}
});
新Vue({
el:“应用程序”，
商店，
数据（）{
返回{
highlightedEntry:null，
highlightedEl:null
};
},
创建（）{
这是我的(
from（数组（this.rowCount.keys（））.map（i=>{
返回{
id:我，
列：Array.from（Array（parseInt（20））.keys（））.map（j=>{
返回{
id:j，
值：Math.random（）.toPrecision（4），
石广生：错
};
})
};
})
);
},
计算：{
…Vuex.mapGetters（[“行”、“行计数”、“突出显示的”]）
},
组成部分：{
亚塞尔：{
道具：['rowId'，'column']，
模板：“值：{column.Value}}”，
计算：{
样式（）{
返回this.column.style；
}
},
方法：{
突出显示（）{
this.$emit（'highlight'，this.rowId，this.column）；
}
}
}
},
方法：{
…Vuex.MapTranslations（[“setRows”，“setHighlighted”]），
突出显示（行ID，列）{
如果（此.highlightedEntry）{
this.highlightedEntry.ishighlight=false；
}
this.highlightedEntry=列；
column.ishighletted=true；
此文件已突出显示({
row:rowId，
column:column.id
});
}
}
});
.row{
显示器：flex；
证明内容：之间的空间；
}
.row>*{
边框：1px纯黑；
}
瑞德先生{
背景色：红色；
}

单元格：{{rowCount*20}
我以前做过，但它并没有改善单击元素时的“重新渲染”。我相信关键在于元素的顺序，而不是某个元素的道具变化。这就是Vue.js提供的。我从来没有遇到过像您这样的性能问题，即使在迭代类似数量的项时也是如此。如果您有几个独特的属性，请尝试使用不同的
id
值。我同意，不应该尝试使用20K，但我不明白为什么在单击某个元素时重新呈现页面需要这么长时间。它所要做的就是用一个类更新一个div。重新运行这个方法20K次应该不会花太长时间。你可以在这里找到一个合适的解释，我认为这是一个很好的解决方案。谢谢你的反馈。我真的不希望像这样直接接触dom，这有点违背了使用Vue.JS IMO的目的。但是，您可能是对的，这是目前唯一一种不用分页进行优化的方法。您可以采取其他方法，值得注意的是，将
isHighlighted
成员放入column对象中，并将其用于类绑定。@我们希望我已将答案更新为更Vue-ish。
<div v-for="column in row.columns" :key="column.id" ...

 <div v-for="item in items" :key="item.id">
   <!-- content -->
 </div>