TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超7個(gè)贊
1、加入key的作用當(dāng)Vue.js用v-for正在更新已渲染過的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue將不會(huì)移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的順序，而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。這個(gè)類似Vue1.x的track-by="$index"引入Vue的官網(wǎng)回答，大概意思就是說，對(duì)已經(jīng)渲染的dom節(jié)點(diǎn)，在源列表數(shù)據(jù)部分變化的時(shí)候，不用全部重新渲染dom，只是重新渲染數(shù)據(jù)變化的部分。2、在初次渲染列表的時(shí)候，key是否有優(yōu)化的效果?沒有優(yōu)化效果。3、key是在什么時(shí)候產(chǎn)生優(yōu)化的效果的?key是在源數(shù)據(jù)發(fā)生改變的時(shí)候，如果有key，就能追蹤到具體是哪一項(xiàng)或哪幾項(xiàng)數(shù)據(jù)發(fā)生了改變，就能只更新改變數(shù)據(jù)對(duì)應(yīng)的dom。如果你key不唯一的話，vue就很難精確的追蹤到改變的數(shù)據(jù)是哪些了，這也是為什么key必須唯一的原因。另外，最好不要用列表渲染的index去作為key使用，因?yàn)楫?dāng)源數(shù)據(jù)發(fā)生位置變換，比如說，第一項(xiàng)的數(shù)據(jù)挪到了第二項(xiàng)，但是你的key還是不變的，vue為了更新對(duì)視圖，就必須整個(gè)dom重新渲染，等于說白白消耗了很多性能。所以把index當(dāng)做key使用，是完全沒有意義的。
舉報(bào)