千鋒扣丁學堂HTML5培訓之使用vue for時為什麼要key

今天千鋒扣丁學堂HTML5培訓老師給大家分享一篇關於使用vue for時為什麼要key的詳細介紹，首先用vue框架寫前端代碼時經常會用用到v-for這個方法，下面我們一起來看一下吧。

一.diff算法

修改渲染真實的dom會引起整個dom樹的重繪和重排。diff算法可以幫助我們只對我們想要修改的部分進行更新而不會引起整個dom樹的重繪和重排。我們先根據dom生成virtualDOM，當virtualDom上的某個dom節點數據改變後會生成一個新的Vnode.將新生成的Vnode和oldVnode做對比。發現有修改的地方就直接渲染到真實的dom樹上。

diff算法一邊比較新舊節點的區別一邊在真實的dom樹上打補丁

二.key的作用

我個人覺得key的作用就是為了快速的找到新節點對應的舊節點。key是給每一個vnode唯一的id,可以依靠key,更準確,更快的拿到oldVnode中對應的vnode節點。但不使用key時代碼也可以運行但是會報warning.為什麼呢。

三.不使用key時的執行

例:不使用key一個數組arr=['1','2','3','4','5','6']。

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

上面代碼會生成6個div每個div對應的arr中的數字。現在我們將arr變成[0,1,2,3,7,8,9]。更新渲染的步驟時這樣的原先div中的1變成02變成1以此類推最後新增一個div內容為9。Vue會通過改變原來元素的內容和增加/減少元素來完成這個改變，因為沒有key屬性，Vue無法跟蹤每個節點，只能通過這樣的方法來完成變更。

四.使用key時

例: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]新增一個

元素，它的內容為0，並將它插入原先內容為1的元素之前。在有了key屬性之後，Vue會記住元素們的順序，並根據這個順序在適當的位置插入/刪除元素來完成更新，這種方法比沒有key屬性時的就地複用策略效率更高。總體來說，當使用列表渲染時，永遠添加key屬性，這樣可以提高列表渲染的效率，提高了頁面的性能。

以上就是關於千鋒扣丁學堂HTML5培訓之使用vue for時為什麼要key的全部內容,希望對大家有所幫助，想要了解更多關於HTML5方面內容的小夥伴，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業在線學習教育平臺為您提供權威的HTML5開發環境搭建視頻，HTML5培訓後的前景無限，行業薪資和未來的發展會越來越好的，扣丁學堂老師精心推出的HTML5視頻教程定能讓你快速掌握HTML5從入門到精通開發實戰技能。