1. 程式人生 > 其它 >v-for以及key原理

v-for以及key原理

v-for

1.用於展示列表資料 2.語法:v-for="(item, index) in xxx" :key="yyy" 3.可遍歷:陣列、物件、字串(用的很少)、指定次數(用的很少)  

key的原理

1. 虛擬DOM中key的作用:   key是虛擬DOM物件的標識,當資料發生變化時,Vue會根據【新資料】生成【新的虛擬DOM】,   隨後Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較,比較規則如下:     (1).舊虛擬DOM中找到了與新虛擬DOM相同的key:       ①.若虛擬DOM中內容沒變, 直接使用之前的真實DOM!       ②.若虛擬DOM中內容變了, 則生成新的真實DOM,隨後替換掉頁面中之前的真實DOM。
    (2).舊虛擬DOM中未找到與新虛擬DOM相同的key,建立新的真實DOM,隨後渲染到到頁面。   2. 用index作為key可能會引發的問題:
  (1). 若對資料進行:逆序新增、逆序刪除等破壞順序操作:會產生沒有必要的真實DOM更新 ==> 介面效果沒問題, 但效率低。
  (2). 如果結構中還包含輸入類的DOM:會產生錯誤DOM更新 ==> 介面有問題。
3. 開發中如何選擇key?:   (1).最好使用每條資料的唯一標識作為key, 比如id、手機號、身份證號、學號等唯一值。   (2).如果不存在對資料的逆序新增、逆序刪除等破壞順序操作,僅用於渲染列表用於展示,使用index作為key是沒有問題的。