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渲染的元素的列表，默認情況下它使用「就地補丁」的策略。如果數據項的順序發生了變化，Vue將不會移動DOM元素來匹配項目的順序，而是會將每個元素就地修補並確保它反映應該在該特定索引處呈現的內容。

爲了給Vue的一個提示，以便它可以跟蹤每個節點的身份，從而再利用和重新排序現有的元素，你需要爲每個項目的唯一關鍵屬性。對於關鍵的理想值將是每個項目的唯一ID。

---

在你的情況（假設每個問題對象都有一個唯一id屬性）：

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

---

當使用key屬性沒有明確要求，it is an essential rule（Priority A）在官方Vue風格指南。實際上，您應該始終使用key和v-for。