主要記錄：
一、 有key和沒(méi)key的差異
二、 key的作用
三您市、 相關(guān)demo代碼
一、有key和沒(méi)key的差異
1役衡、without key:
當(dāng)選中青丘白淺時(shí)茵休，input添加一個(gè)新值(比如離鏡)后選中是“離鏡”，并不是我們想要的結(jié)果手蝎，我們想要的是當(dāng)添加“離鏡”后榕莺，選中的是青丘白淺。
2棵介、with key:
加了key之后钉鸯，相同操作，選中青丘白淺邮辽，添加“離鏡”后依舊選中的是青丘白淺唠雕，是我們理想的效果。
（demo的相關(guān)代碼在文末~）
3吨述、原理:
在我們進(jìn)行添加數(shù)據(jù)后岩睁，vue內(nèi)部時(shí)通過(guò)Diff算法對(duì)虛擬DOM進(jìn)行更新，從而進(jìn)行頁(yè)面數(shù)據(jù)更新渲染揣云。
的捕儒。
（1）diff算法原理-BC之間插入一個(gè)F節(jié)點(diǎn)：
（2）Diff插入一個(gè)節(jié)點(diǎn)時(shí)默認(rèn)操作：
Diff算法插入節(jié)點(diǎn)的默認(rèn)操作如圖②，并沒(méi)有準(zhǔn)確地追蹤F節(jié)點(diǎn)邓夕，將其放在準(zhǔn)確位置刘莹。
（3）Diff加key唯一標(biāo)識(shí)：
為了能把F節(jié)點(diǎn)放在準(zhǔn)確位置亿笤，我們給F節(jié)點(diǎn)添加一個(gè)key值來(lái)作為唯一標(biāo)識(shí)。有了key栋猖，Diff算法就可以正確識(shí)別F節(jié)點(diǎn)并把它插入正確的位置。
了解Diff原理之后汪榔，前面with key青丘白淺的例子應(yīng)該就更通俗易懂了蒲拉。
二、key的作用
"為了給 Vue 一個(gè)提示痴腌，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份雌团，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性"--Vue官網(wǎng)
:key="唯一標(biāo)識(shí)" ,唯一標(biāo)識(shí)可以是item里面id index等,key的作用主要是為了高效的更新虛擬DOM士聪。
可以這樣理解：v-for加key是為了添加唯一標(biāo)識(shí)锦援，讓Diff算法可以正確識(shí)別節(jié)點(diǎn)并把它插入正確的位置，提高Vue對(duì)虛擬DOM的更新效率剥悟。
三灵寺、相關(guān)demo代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>:key</title>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<div>
<h3>沒(méi)有:key</h3>
<input type="text" v-model="name" v-on:keyup.enter="add">
<button @click="add">添加</button>
<ul>
<li v-for="(item,i) in list">
<input type="checkbox">{{item.name}}
</li>
</ul>
<p>解釋：當(dāng)選中青丘白淺時(shí)，input添加一個(gè)新值(比如離鏡)后選中的確是“離鏡”区岗，并不是我們想要的結(jié)果略板，我們想要的是當(dāng)添加“離鏡”后，一種選中的是青丘白淺</p>
</div>
<hr>
<div>
<h3>有:key</h3>
<input type="text" v-model="name" v-on:keyup.enter="add">
<button @click="add">添加</button>
<ul>
<li v-for="(item,i) in list" :key="item.id">
<input type="checkbox">{{item.name}}
</li>
</ul>
<p>解釋：同樣當(dāng)選中青丘白淺時(shí)慈缔，添加“離鏡”后依舊選中的是青丘白淺叮称。</p>
<p>:key="唯一標(biāo)識(shí)" ,唯一標(biāo)識(shí)可以是item里面id index等,key的作用主要是為了高效的更新虛擬DOM</p>
<p>"為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份藐鹤，從而重用和重新排序現(xiàn)有元素瓤檐，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性"--官網(wǎng)</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '青丘白淺' },
{ id: 2, name: '夜華' },
{ id: 3, name: '墨淵' }
]
},
methods: {
add: function () {
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
},
})
</script>
</body>
</html>
未完待續(xù)。娱节。挠蛉。
不定期更新筆記的日常~歡迎給?
