溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“vue中列表如何使用唯一key”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中列表如何使用唯一key”這篇文章吧。
比如有一個(gè)列表，我們需要在中間插入一個(gè)元素，在不使用 key 或者使用 index 作為 key 會(huì)發(fā)生什么變化呢？先看個(gè)圖
如圖的 li1 和 li2 不會(huì)重新渲染，這個(gè)沒(méi)有爭(zhēng)議的。而 li3、li4、li5 都會(huì)重新渲染
因?yàn)樵诓皇褂?nbsp;key 或者列表的 index 作為 key 的時(shí)候，每個(gè)元素對(duì)應(yīng)的位置關(guān)系都是 index，上圖中的結(jié)果直接導(dǎo)致我們插入的元素到后面的全部元素，對(duì)應(yīng)的位置關(guān)系都發(fā)生了變更，所以在 patch 過(guò)程中會(huì)將它們?nèi)紙?zhí)行更新操作，再重新渲染。
這可不是我們想要的，我們希望的是渲染添加的那一個(gè)元素，其他四個(gè)元素不做任何變更，也就不要重新渲染
而在使用唯一 key 的情況下，每個(gè)元素對(duì)應(yīng)的位置關(guān)系就是 key，來(lái)看一下使用唯一 key 值的情況下
這樣如圖中的 li3 和 li4 就不會(huì)重新渲染，因?yàn)樵貎?nèi)容沒(méi)發(fā)生改變，對(duì)應(yīng)的位置關(guān)系也沒(méi)有發(fā)生改變。
這也是為什么 v-for 必須要寫(xiě) key，而且不建議開(kāi)發(fā)中使用數(shù)組的 index 作為 key 的原因
以上是“vue中列表如何使用唯一key”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
