聽我說 從 條件渲染 那一篇，我學習到瞭如何用Vue對dom節點根據條件顯示 但單單有條件還不夠啊，有時候數據是一大坨一大坨的數據，如果Vue不提供咱要麼使用“v-html” 要麼就沒辦法實現 v-html又感覺太low了，Vue提供了另外的指令更好的實現，那便是：列表渲染 列表渲染：v-for 簡 ...
聽我說
從 條件渲染 那一篇，我學習到瞭如何用Vue對dom節點根據條件顯示
但單單有條件還不夠啊，有時候數據是一大坨一大坨的數據，如果Vue不提供咱要麼使用“v-html” 要麼就沒辦法實現
v-html又感覺太low了，Vue提供了另外的指令更好的實現，那便是：列表渲染
列表渲染：v-for
簡單的列表渲染可以使用v-for來完成，而Vue提供了兩種採用形式的列表渲染
列表渲染之數組
假設我有一個數組，然後我希望數組裡面的數據，通過展示在ul的一個一個li裡面，並且要求數組更新的同時li會自動的增減
假設data如下
//假設下麵是Vue的配置對象
{
data:{
msgList:[
{
name:"張三",
age:19,
sex:"男"
},
{
name:"李四",
age:22,
sex:"男"
},
{
name:"王五",
age:20,
sex:"女"
},
{
name:"陳真",
age:30,
sex:"男"
},
]
}
}
那麼dom節點可以這麼寫，達到渲染的效果
<!--假設這是根節點的內容-->
<ul>
<li v-for="item of msgList">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
此時，ul裡面的li渲染出的個數等同於msgList的個數，同時item表示當前li的數組元素
可以用JavaScript的for-of迴圈來理解，這裡用v-for="item in msgList"也是一樣的效果
item都是表示msgList的成員
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="item of msgList">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgList:[{
name:"張三",
age:19,
sex:"男"
},
{
name:"李四",
age:22,
sex:"男"
},
{
name:"王五",
age:20,
sex:"女"
},
{
name:"陳真",
age:30,
sex:"男"
}]
}
})
</script>
</html>
列表渲染之對象
Vue還允許配置為對象這種可遍歷的變數來使用v-for
如果配置為對象的話，那麼會拿到兩個參數，一個是key一個是value（先拿到value在拿到key）
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="(value,key) of msgObj">
{{key}} - {{value}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgObj:{
name:"陳真",
age:30,
sex:"男"
}
}
})
</script>
</html>
當然也可以寫一個參數，只接受value
<div id="root">
<ul>
<li v-for="value of msgObj">
{{value}}
</li>
</ul>
</div>
完全寫法
無論是對象還是數組，列表渲染都會給當前值索引，所以對於數組的話就可以寫成兩個參數，顯示value後是索引
<ul>
<li v-for="(item,index) of msgList">
{{index}}、{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
如何使對象的話就這麼寫
<ul>
<li v-for="(value,key,index) of msgObj">
{{index}}、{{key}} = {{value}}
</li>
</ul>
key的應用&渲染原理淺析
為了避免出錯，無論是react還是vue使用v-for，原則上都應該配置唯一標識作為key
當出現要對數據修改時，未配置唯一標識key可能會出現bug
因此對於需要用上v-for的節點請配置上數據唯一標識作為key
詳細解釋請參照：維護狀態
淺析出錯原因
Vue在監控到數據改變時，並不會如我們所想的一樣馬上渲染dom
而是會先渲染虛擬dom，然後通過特定演算法或者說特定規則去渲染實際dom
渲染規則如下：
- 當遇到v-for時，首先尋找數據老的虛擬dom和新的虛擬dom的唯一標識進行對比（以li為例）
- 在li節點中，如果有一樣的部分那麼照搬老的dom，不重新渲染，直接搬運反之根據新的虛擬dom重新渲染
- 如果li中這個節點在舊虛擬dom不存在，那麼久會按照新的虛擬dom重新渲染
不放圖片說不清楚，放圖片說一大堆，搬出尚矽谷的視頻吧：零基礎入門Vue之key的作用和原理
key的具體用法
key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試就地修改/復用相同類型元素的演算法。而使用 key 時，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。
對於 Vue中的key 的用法也很簡單，他是為了標識v-for每個迴圈元素的唯一性，所以key也應該是唯一的
寫法如下
<dom v-for="item in list" :key="item.id"></dom>
此時，當前dom與數據唯一的id互相綁定，這樣如果dom更新了，新舊虛擬dom就能一一對應的去對比
就不會出現元素紊亂，並且渲染效率低下的問題
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="item of msgList" :key="item.id">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgList:[{
id:1,
name:"張三",
age:19,
sex:"男"
},
{
id:2,
name:"李四",
age:22,
sex:"男"
},
{
id:3,
name:"王五",
age:20,
sex:"女"
},
{
id:4,
name:"陳真",
age:30,
sex:"男"
}]
}
})
</script>
</html>
註：切忌把索引作為key，因為只要不是往末尾插入數據或者刪除數據的方式來修改數據，都會造成index失去唯一標識的作用
The End
本片完~
