vue 元件v for 繫結key屬性的作用

2021-10-17 09:43:56 字數 478 閱讀 8299

參考:

vue的常見問題

關於vue的面試

當vue中使用 v-for 更新已經渲染過的元素列表時,預設用"就地復用"策略。

如果資料項的順序被改變,vue將不是移動dom元素來匹配資料項的改變,而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。

為了給vue 乙個提示,以便它能跟蹤每個節點的身份,進行重用和重新排序現有元素,需要為每項提供乙個唯一 key 屬性。

key 屬性主要用於vue的虛擬演算法。在對節點進行diff的過程中,判斷新舊nodes是否為相同節點的乙個重要條件就是 key 是否相等。如果是相同節點,則會盡可能的復用原有的dom節點。

如果不使用key,vue會使用一種最大限度減少動態元素並且盡可能的嘗試修復/再利用相同型別元素的演算法。

使用key,它會基於key的變化重新排列元素順序,並且會移除 key 不存在的元素。

Vue指令v for和key屬性

迭代陣列 迭代物件中的屬性 迭代數字 這是第 個p標籤 2.2.0 的版本裡,當在元件中使用v for 時,key 現在是必須的。當 vue.js 用 v for 正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue將不是移動 dom 元素來匹配資料項的順序,而是簡...

Vue中v for為什麼使 key

我們需要使用key來給每個節點做乙個唯一標識,diff演算法就可以正確的識別此節點,找到正確的位置區插入新的節點。加key主要不是為了效能,主要是為了區分兩個 vnode 節點。比如乙個列表,增加其中一項,如果不加 key 區分,增加後新舊 vnode 對比就會出現 bug。因為列表元素 dom 結...

vue中有關v for和key的細節

渲染資料時我們可能會用到v for來遍歷資料,但是key的話有時候是可加可不加,實際上為了規範還是加上比較好,因為可能會遇到如下例子中的問題 html js 效果圖則是這樣的 這裡輸入id和name後新增是新增在前面的,問題就是,如果h1標籤沒有加key,我先勾上 4 小黑 然後這時輸入id和nam...