詳解Vue的列表渲染
阿新 • • 發佈：2021-11-22
目錄
- 1. v-for:遍歷陣列內容（常用）
- 2. v-for:遍歷物件屬性（常用）
- 3.遍歷字串（不常用）
- 4.遍歷指定次數（不常用）
- 5.key 的作用和原理
- 1.虛擬DOM中key的作用:
- 2.對比規則:
- 3.用index作為key可能會引發的問題:
- 4.開發中如何選擇key?
- 總結
1. v-for:遍歷陣列內容（常用）
in 也可以用 of 代替
<body>
<div id="div1">
<li v-for='(p,i) in persons' :key=i>
{{p.name}}--{{p.age}}
<!-- 張--18
李--19
劉--17 -->
</li>
</div>
</body>
<script type="text/">
.config.produnctionTps=false
new Vue({
el:www.cppcns.com
2. v-for:遍歷物件屬性（常用）
<body>
<div id="div1">
<li v-for='(p,k) in persons' :key=k>
{{p}}--{{i}}
<!-- 張--name
18--age -->
</li>
</div>
</body>
<script type="text/script">
Vue.config.produnctionTps=false
new Vue({
el:"#div1",data:{
persons:{
name:"張",age:18
}
}
})3.遍歷字串（不常用）
<body>
<div id="div1www.cppcns.com">
<li v-for='(p,i) in str' :key=i>
{{p}}--{{i}}
<!-- a--0
b--1
c--2
d--3
e--4 -->
</li>
</div>
</body>
<script type="text/javascript">
Vue.config.produnctionTps=false
new Vue({
el:"#div1",data:{
str:"abcde"
}
})
</script>4.遍歷指定次數（不常用）
<body>
<div id="div1">
<li v-for='(p,i) in 5' :key=i>
{{p}}--{{i}}
<!-- 1--0
2--1
3--2
4--3
5--4 -->
</li>
</div>
</body>
5.key 的作用和原理
在上面都用的index 作為key，但是在破壞順序修改dom以及有input內容就會出錯。僅在用於渲染頁面而不需要修改頁面時可用index作為key.
強烈建議用資料的唯一標識，如id、手機號、郵箱號作為key
1.虛擬DOM中key的作用:
key是虛擬DOM物件的標識，當資料發生變化時，Vue會根據[新資料]生成[新的虛擬DOM],隨後Vue進行[新虛擬DOM]與[舊虛擬DOM]的差異比較，比較規則如下:www.cppcns.com
2.對比規則:
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key:
①.若虛擬DOM中內容沒變， 直接使用之前的真實DOM!
②.若虛擬DOM中內容變了，則生成新的真實DOM，隨後替換掉頁面中之前的真實DOM。
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key建立新的真實DOM，隨後渲染到到頁面。
3.用index作為key可能會引發的問題:
1.若對資料進行:逆序新增、逆序刪除等破壞順序操作:
會產生沒有必要的真實DOM更新==>介面效果沒問題，但效率低。
2.如果結構中還包含輸入類的DOM:
會產生錯誤DOM更新==> 介面有問題。
4.開發中如何選擇key?
1.最好使用每條資料的唯一標識作 為key,比如id、 手機號、身份證號、學號等唯一值。
2.如果不存在對資料的逆序新增、逆序刪除等破壞順序操作，僅用於渲染列表用於展示，使用index作為key是沒有問題的。
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!