前言：

用vue框架寫前端代碼時(shí)經(jīng)常會(huì)用用到v-for這個(gè)方法，但使用此方法時(shí)vue推薦我們加上一個(gè)唯一標(biāo)識(shí)key這是為什么呢？閱讀了網(wǎng)上各位大神的文章以及自己的一些理解對這個(gè)問題有了新的認(rèn)識(shí)。所以記錄下來，若各位看官看到文章里面有錯(cuò)誤的地方請指正一下。謝謝各位大佬。

一.diff算法

修改渲染真實(shí)的dom會(huì)引起整個(gè)dom樹的重繪和重排。diff算法可以幫助我們只對我們想要修改的部分進(jìn)行更新而不會(huì)引起整個(gè)dom樹的重繪和重排。 我們先根據(jù)dom生成virtual DOM，當(dāng)virtual Dom上的某個(gè)dom節(jié)點(diǎn)數(shù)據(jù)改變后會(huì)生成一個(gè)新的Vnode.將新生成的Vnode和oldVnode做對比。發(fā)現(xiàn)有修改的地方就直接渲染到真實(shí)的dom樹上。

diff算法一邊比較新舊節(jié)點(diǎn)的區(qū)別一邊在真實(shí)的dom樹上打補(bǔ)丁

二.key的作用

我個(gè)人覺得key的作用就是為了快速的找到新節(jié)點(diǎn)對應(yīng)的舊節(jié)點(diǎn)。key是給每一個(gè)vnode唯一的id,可以依靠key,更準(zhǔn)確, 更快的拿到oldVnode中對應(yīng)的vnode節(jié)點(diǎn)。但不使用key時(shí)代碼也可以運(yùn)行但是會(huì)報(bào)warning.為什么呢。

三.不使用key時(shí)的執(zhí)行

例:不使用key 一個(gè)數(shù)組arr=['1','2','3','4','5','6']。

<view v-for='arr'>
    {{item}}
  </view>

上面代碼會(huì)生成6個(gè)div每個(gè)div對應(yīng)的arr中的數(shù)字?，F(xiàn)在我們將arr變成[0, 1, 2, 3, 7, 8, 9]。更新渲染的步驟時(shí)這樣的原先div中的1變成0 2變成1以此類推最后新增一個(gè)div內(nèi)容為9。 Vue會(huì)通過改變原來元素的內(nèi)容和增加/減少元素來完成這個(gè)改變，因?yàn)闆]有key屬性，Vue無法跟蹤每個(gè)節(jié)點(diǎn)，只能通過這樣的方法來完成變更。

四.使用key時(shí)

例:numbers為[1, 2, 3, 7, 8, 9]

<div v-for="(num, index) in numbers" :key="index">
   {{num}}
  </div>

變成了[0, 1, 2, 3, 7,8,9]新增一個(gè)

元素，它的內(nèi)容為0，并將它插入原先內(nèi)容為1的元素之前。 在有了key屬性之后，Vue會(huì)記住元素們的順序，并根據(jù)這個(gè)順序在適當(dāng)?shù)奈恢貌迦?刪除元素來完成更新，這種方法比沒有key屬性時(shí)的就地復(fù)用策略效率更高。 總體來說，當(dāng)使用列表渲染時(shí)，永遠(yuǎn)添加key屬性，這樣可以提高列表渲染的效率，提高了頁面的性能。

總結(jié)

以上所述是小編給大家介紹的使用vue for時(shí)為什么要key屬性,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論