Vue.js v-for-list在操作数组时重新渲染所有样式

我有一个

v-for

列表，用于呈现数组中的项目。问题是，当我操纵数组时，所有组件都会从头开始重新渲染。这在CSS样式中尤其明显，这些样式根据它们在数组中的位置而变化

当我改变数组时，为什么之前的所有组件（DOM元素）也会完全重新渲染？这看起来效率太低了

如果您使用纯javascript实现了这一点，那么您只需在现有DOM中附加/前置一个DOM元素，并将手从已经存在的项目上移开

组成部分

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

嗯，所以我想我的问题是，

v-for

总是需要这样做，还是可以禁用它？

当Vue更新使用

v-for

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

要给Vue一个提示，使其能够跟踪每个节点的标识，从而重用和重新排序现有元素，您需要为每个项提供唯一的键属性。键的理想值是每个项目的唯一id

---

在您的情况下（假设每个问题对象都有一个唯一的

id

属性）：

{{q}

---

虽然在官方Vue样式指南中没有明确要求使用

键

属性，（）。实际上，您应该始终将

键

与

v-for

一起使用

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

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