Vue中v-for迴圈語句使用,以及其中key的原理
ead>highlight: a11y-dark theme: smartblue
Vue中v-for迴圈語句使用,以及其中key的原理
本文已參與「掘力星計劃」,贏取創作大禮包,挑戰創作激勵金。
一、列表渲染
在vue中v-for的使用還是非常的廣泛。在我們使用v-for的場景中,使用最多的就是用來渲染列表。渲染的資料主要有陣列、物件、字串等。 常用的三種: 1. 遍歷陣列 2. 迭代物件 3. 字串 4. 遍歷指定次數
程式碼
```html
人員列表(陣列遍歷)
- {{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是沒有問題的。
寫在最後
今日收到的掘金簡訊【願你有前進一寸的勇氣,亦有後退一尺的從容,晚安。】
感動了掘金大大。
願我們走出半生路,歸來任是少年
「其他文章」
- Mybatis的簡單增刪改查
- 瞭解SpringMVC以及原理
- Spring之AOP
- Vue動態樣式你不會嗎
- vue計算屬性詳解
- Spring 控制反轉(IOC)
- vue中this.$set的使用
- MyBatis之動態SQL的使用
- Spring 自動裝配
- MyBatis的配置詳解
- js深拷貝你還不會嗎
- JavaScript的節流與防抖
- CSS3動畫屬性就這些了
- 我用網格佈局實現奧運五環
- 佈局的神--網格佈局最全總結,建議收藏
- vue 解決axios請求出現前端跨域問題
- Vue中v-for迴圈語句使用,以及其中key的原理
- 5分鐘掌握Vuex,從原理到使用深入淺出
- 安卓基礎之Spinner(列表選擇框)
- 安卓選單欄Menu用法講解 看這一篇就夠了