v-for list在操作数组时重新呈现所有样式

Question

我有一个v-for列表，用于呈现数组中的项目。问题是当我操作数组时，所有组件都是从头开始重新渲染的。这在CSS样式中尤为明显，这些样式根据它们在数组中的位置而发生了变化。

当我改变数组时，为什么所有以前的组件（DOM元素）也完全重新渲染？这似乎超级低效！

如果您使用纯JavaScript执行此操作，您只需将DOM元素附加/添加到现有DOM中，并将您的手放在已经存在的项目上。

部件

<card v-for="q in questions">{{q}}</card> 

数组操作

if(this.questions.length > 4) this.questions.pop()
this.questions.unshift(this.question)

嗯，所以我想我的问题是，v-for总是需要这样做，还是可以禁用它？

Answer 1

From the Documentation:

  

当Vue更新使用v-for呈现的元素列表时，默认情况下它使用“就地补丁”策略。如果数据项的顺序已经改变，而不是移动DOM元素以匹配项的顺序，Vue将就地修补每个元素并确保它反映应该在该特定索引处呈现的内容。

  

为Vue提供一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项目提供唯一的键属性。 key的理想值是每个项目的唯一ID。

在您的情况下（假设每个问题对象都有唯一的id属性）：

<card v-for="q in questions" :key="q.id">{{ q }}</card>

虽然官方Vue样式指南中未明确要求使用key属性it is an essential rule（Priority A）。实际上，您应始终使用key v-for。