v-for以及key原理
阿新 • • 發佈:2022-04-22
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可能會引發的問題:
(2). 如果結構中還包含輸入類的DOM:會產生錯誤DOM更新 ==> 介面有問題。
3. 開發中如何選擇key?: (1).最好使用每條資料的唯一標識作為key, 比如id、手機號、身份證號、學號等唯一值。 (2).如果不存在對資料的逆序新增、逆序刪除等破壞順序操作,僅用於渲染列表用於展示,使用index作為key是沒有問題的。