原理:
1. vue實現了一套虛擬dom,使我們可以不直接操作dom元素,只運算元據就可以重新渲染頁面,而隱藏在背後的原理是高效的diff演算法
2. 當頁面資料發生改變,diff演算法只會比較同一層級的節點
3. 如果節點型別不同,直接乾掉前面的節點,再建立並新增新的節點,不會再比較這個節點後面的子節點
如果節點型別相同,則會重新設定該節點的屬性,從而實現節點的更新
4. 使用key給每個節點做乙個唯一標識,diff演算法就可以正確的識別此節點,"就地更新"找到正確的位置區插入新的節點
作用:
1. 高效的更新虛擬dom,提高渲染的效能
2. 避免資料混亂的情況出現
Vue v for中為什麼要加屬性key
在vue官網中強烈推薦在使用v for時要加key屬性，這篇文章看看加屬性key和不加屬性key的區別。我們模擬一下vue中對這部分的處理流程。先建立3個div元素，內容為 xiaozhang xiaowang xiaoliu 然後在第乙個div元素之前再新增乙個新div元素xiaoli，渲染後的內...
為什麼react列表要加key
遍歷物件的每乙個屬性深度對比是非常浪費效能的 react 使用列表的key來進行對比，如果不指定，就預設為 index 下標 那麼，為什麼 不指定 key 用 index 下標 是不好的呢？假設現在有這樣一段 const users users.map u,i 它會渲染出這個 dom 樹 bob s...
Vue中v for為什麼使 key
我們需要使用key來給每個節點做乙個唯一標識，diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點。加key主要不是為了效能，主要是為了區分兩個 vnode 節點。比如乙個列表，增加其中一項，如果不加 key 區分，增加後新舊 vnode 對比就會出現 bug。因為列表元素 dom 結...