溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue中列表如何使用唯一key”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue中列表如何使用唯一key”這篇文章吧。
比如有一個列表，我們需要在中間插入一個元素，在不使用 key 或者使用 index 作為 key 會發生什么變化呢？先看個圖
如圖的 li1 和 li2 不會重新渲染，這個沒有爭議的。而 li3、li4、li5 都會重新渲染
因為在不使用 key 或者列表的 index 作為 key 的時候，每個元素對應的位置關系都是 index，上圖中的結果直接導致我們插入的元素到后面的全部元素，對應的位置關系都發生了變更，所以在 patch 過程中會將它們全都執行更新操作，再重新渲染。
這可不是我們想要的，我們希望的是渲染添加的那一個元素，其他四個元素不做任何變更，也就不要重新渲染
而在使用唯一 key 的情況下，每個元素對應的位置關系就是 key，來看一下使用唯一 key 值的情況下
這樣如圖中的 li3 和 li4 就不會重新渲染，因為元素內容沒發生改變，對應的位置關系也沒有發生改變。
這也是為什么 v-for 必須要寫 key，而且不建議開發中使用數組的 index 作為 key 的原因
以上是“vue中列表如何使用唯一key”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
