使用vue for時爲何要key

前言： 用vue框架寫前端代碼時常常會用用到v-for這個方法，但使用此方法時vue推薦咱們加上一個惟一標識key這是爲何呢？閱讀了網上各位大神的文章以及本身的一些理解對這個問題有了新的認識。因此記錄下來，若各位看官看到文章裏面有錯誤的地方請指正一下。謝謝各位大佬。

一.diff算法

修改渲染真實的dom會引發整個dom樹的重繪和重排。diff算法能夠幫助咱們只對咱們想要修改的部分進行更新而不會引發整個dom樹的重繪和重排。 咱們先根據dom生成virtual DOM，當virtual Dom上的某個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變成0 2變成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屬性，這樣能夠提升列表渲染的效率，提升了頁面的性能。