我們知道，vue和react都實現了一套虛擬dom，使我們可以不直接操作dom元素，只運算元據便可以重新渲染頁面。而隱藏在背後的原理便是其高效的diff演算法。
vue和react的虛擬dom的diff演算法大致相同，其核心是基於兩個簡單的假設：1. 兩個相同的元件產生類似的dom結構，不同的元件產生不同的dom結構。2. 同一層級的一組節點，他們可以通過唯一的id進行區分。
基於以上這兩點假設，使得虛擬dom的diff演算法的複雜度從o(n^3)降到了o(n)。這裡我們借用react』s
diff algorithm中的一張圖來簡單說明一下：
當頁面的資料發生變化時，diff演算法只會比較同一層級的節點：
如果節點型別不同，直接乾掉前面的節點，再建立並插入新的節點，不會再比較這個節點以後的子節點了。
如果節點型別相同，則會重新設定該節點的屬性，從而實現節點的更新。
當某一層有很多相同的節點時，也就是列表節點時，diff演算法的更新過程預設情況下也是遵循以上原則。
比如一下這個情況：
我們希望可以在b和c之間加乙個f，diff演算法預設執行起來是這樣的：
要使用key來給每個節點做乙個唯一標識，diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點。
所以一句話，key的作用主要是為了高效的更新虛擬dom。另外vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。
為什麼不能用 index 作為 key，因為用index作為key的話，當刪除陣列資料時，對應的index會自動跟著變化，沒有起到key應該起到的作用。所以推薦用列表資料中的業務唯一id作為key
Vue中v for為什麼使 key
我們需要使用key來給每個節點做乙個唯一標識，diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點。加key主要不是為了效能，主要是為了區分兩個 vnode 節點。比如乙個列表，增加其中一項，如果不加 key 區分，增加後新舊 vnode 對比就會出現 bug。因為列表元素 dom 結...
vue 中的 key 有什麼作用？
key 是為 vue 中 vnode 的唯一標記，通過這個 key，我們的 diff 操作可以更準確 更快速。vue 的 diff 過程可以概括為 oldch 和 newch 各有兩個頭尾的變數 oldstartindex oldendindex 和 newstartindex newendinde...
Vue指令v for和key屬性
迭代陣列 迭代物件中的屬性 迭代數字 這是第 個p標籤 2.2.0 的版本裡，當在元件中使用v for 時，key 現在是必須的。當 vue.js 用 v for 正在更新已渲染過的元素列表時，它預設用 就地復用 策略。如果資料項的順序被改變，vue將不是移動 dom 元素來匹配資料項的順序，而是簡...