Vue中v-for迴圈語句使用，以及其中key的原理

語言: CN / TW / HK
時間 2021-10-23 13:15:11
ead>

highlight: a11y-dark theme: smartblue

Vue中v-for迴圈語句使用，以及其中key的原理

本文已參與「掘力星計劃」，贏取創作大禮包，挑戰創作激勵金。

一、列表渲染

在vue中v-for的使用還是非常的廣泛。在我們使用v-for的場景中，使用最多的就是用來渲染列表。渲染的資料主要有陣列、物件、字串等。 常用的三種： 1. 遍歷陣列 2. 迭代物件 3. 字串 4. 遍歷指定次數

image.png 程式碼

```html

Document

人員列表（陣列遍歷）

  • {{p.name}}--{{p.age}}

老王（ 物件遍歷）

  • {{p}}

字串遍歷

  • {{p}}

```

*小結* v-for指令：

  • 大多數用於展示資料
  • 基本的語法v-for="（item,index ）in persons" :key='index',item為每一項的value值，index為vue給定的識別符號，每一個v-for都應該繫結:key為識別符號，或者說是索引值，這個索引值應該是唯一的。 為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id

二、key的原理

key的原理主要就是vue中的Diff演算法 - vue和react一樣，都實現了一套虛擬dom,使我們可以不直接操作dom元素，只操作資料就可以重新渲染頁面。這就用到Diff比較演算法。

  • 虛擬DOM中key的作用: key是虛擬DOM物件的標識，當資料發生變化時，Vue會根據新資料生成新的虛擬DOM,隨後Vue進行新虛擬DOM與舊虛擬DOM的差異比較

  • 對比規則： 舊虛擬DOM中找到了與新虛擬DOM相同的key:

    • 若虛擬DOM中內容沒變,直接使用之前的真實DOM !
    • 若虛擬DOM中內容變了，則生成新的真實DOM，隨後替換掉頁面中之前的真實DON。 舊虛擬DOM中未找到與新虛擬DOM相同的key
    • 建立新的真實DOM,隨後渲染到到頁面。

  • 用index作為key可能會引發的問題:

  • 若對資料進行:逆序新增、逆序刪除等破壞順序操作;

  • 會產生沒有必要的真實DOM更新==>介面效果沒問題，但效率低。

  • 如果結構中還包含輸入類的DOM:會產生錯誤DOM更新==>介面有問題。

  • 開發中如何選擇key呢?

  • 最好使用每條資料的唯一標識作為key，比如id、手機號、身份證號、學號等唯一的識別符號。

  • 如果不存在對資料的逆序新增、逆序刪除等破壞順序操作，僅用於渲染列表用於展示，使用index作為key是沒有問題的。

寫在最後

今日收到的掘金簡訊【願你有前進一寸的勇氣，亦有後退一尺的從容，晚安。】

感動了掘金大大。

願我們走出半生路，歸來任是少年

image.png

「」
「」