詳解Vue的列表渲染

Posted on by

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/javascript">
	Vue.config.produnctionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:[
				{id:'001',name:"張",age:18},
				{id:'002',name:"李",age:19},
				{id:'002',name:"劉",age:17},
			]
		}
	})
</script>

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/javascript">
	Vue.config.produnctionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:{
				name:"張",
				age:18
			}
		}
	})

3.遍歷字符串（不常用）

<body>
	<div id="div1">
		<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]的差異比較，比較規則如下:

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是沒有問題的。

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：