【Vue】1513- vue中，為什么不能用index作為key？
啊？不是吧，在vue中，不能使用index作為key呢？使用index作為key又好理解又方便，為什么不能使用呢？看文章就知道啦~.
一、key的作用是什么？
key的作用眾所周知，看一個demo就知道：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<ul id="app">
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
<script>
new Vue({
el: '#app',
data() {
return {
list: [1, 2, 3]
}
}
})
</script>
</body>
復制代碼
在vue中key可以沒有，沒有也可以運行并且不會報錯，但是建議加上key。
另外，我們必須知道，vue中key運用的地方------配合v-for使用。key是vue中虛擬dom標記的唯一標識，通過這個key，diff算法能更加準確和快捷。不使用key的情況下，因為vue的就地更新會選擇復用節(jié)點，之前的狀態(tài)被保存，可能會產(chǎn)生一系列的bug。另外，key的唯一性可以被map數(shù)據(jù)結構充分利用，時間復雜度僅為o（1）。
簡單來說，key是唯一標識，為了讓diff算法更準確的找到需要被對比的兩個節(jié)點。
二、什么是虛擬DOM？
虛擬DOM結構就是一個對象而已，其中描述了每一層容器的特征。在beroreCreated執(zhí)行的時候，DOM樹并沒有生成。
虛擬DOM光說肯定是不可理解的，那我們就用代碼說話：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<item v-for="(num,index) in list" :key="index":num="num":class=`item${num}`></item>
</ul>
<button @click="change">change</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
list: [1, 2, 3]
}
},
methods: {
change() {
this.list.reverse()
}
},
//也可以使用原生JS添加DOM結構，不考慮性能的時候
components: {
item: {
props: ['num'],
template: `<div>{{num}}</div>`,
name: 'child'
}
}
})
// let ul = document.getElementById('app');
// for (let i = 1; i <= 3; i++) {
// let li = document.createElement('li');
// li.innerHTML = i;
// ul.appendChild(li);
// }
</script>
</body>
復制代碼
先生成虛擬DOM結構，而不是編譯：
vnode = {
tag: 'ul',
children: [
{
tag: 'li',
children: [{
vnode: {
text: '1'
}
}]
},
{
tag: 'li',
children: [{
vnode: {
text: '2'
}
}]
},
{
tag: 'li',
children: [{
vnode: {
text: '3'
}
}]
},
]
}
復制代碼
再將html編寫成真實的DOM結構：
再編譯成真實DOM結構
<li>1</li>
<li>2</li>
<li>3</li>
復制代碼
虛擬DOM存在的意義就是，減少真實DOM結構的操作，對于瀏覽器來說，減少開銷，提高性能。
三、什么是diff算法?
只要數(shù)據(jù)源發(fā)生變化，就一定會觸發(fā)watcher觀察者函數(shù)（Object。defineProperty（））的回調函數(shù)，去驅動視圖更新，(加_是為了表明這是vue自帶的方法)
回調：
vm._update(vm._render()),
_render會生成vnode
_update會拿著vnoe去__patch__去查找不同
__patch__中啟動的就是diff算法
復制代碼
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<item v-for="(item,index) in list" :key="item.id" :num="item.num" :class=`item${item.num}`></item>
</ul>
<button @click="change">change</button>
</div >
<script>
new Vue({
el: '#app',
data() {
return {
list: [1, 2, 3]
},
methods: {
change() {
this.list.reverse()
}
},
components: {
item: {
props: ['num'],
template: `<div>{{ num }}</div>`,
name: 'child'
}
}
})
</script>
</body >
復制代碼
當點擊按鈕change以后，list反轉變?yōu)椋簂ist:[3,2,1]，diff算法會根據(jù)DOM樹，從上到下，從左到右判斷值是否更新。問題是，為什么diff就知道誰跟誰去進行比對呢？這就是key的作用了，key是唯一標識符，diff算法會根據(jù)key去比對。
四、為什么不能用index作為key？
基于前三者的知識基礎，我們才能更好地理解，為什么不能用index作為key？這里將通過三個demo來展示：
（1）index不能作為key--情景一
demo1：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<item v-for="(num,index) in list" :key="index" :num="num" :class=`item${num}`></item>
</ul>
<button @click="change">change</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
list: [1, 2, 3]
}
},
methods: {
change() {
this.list.reverse()
}
},
components: {
item: {
props: ['num'],
template: `<div>{{num}}</div>`,
name: 'child'
}
}
})
</script>
</body>
復制代碼
demo2：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<item v-for="(item,index) in list" :key="item.id" :num="item.num" :class=`item${item.num}`></item>
</ul>
<button @click="change">change</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
list: [{
id: 0,
num: 1
}, {
id: 1,
num: 2
}, {
id: 2,
num: 3
}]
}
},
methods: {
change() {
this.list.reverse()
}
},
components: {
item: {
props: ['num'],
template: `<div>{{num}}</div>`,
name: 'child'
}
}
})
</script>
</body>
復制代碼
demo1與demo2的區(qū)別在于，key值不一樣，demo1是index作為key，而demo2是list中的id作為key。需要注意的是，當我們點擊change按鈕以后，注意觀察代碼是如何變化的：
demo1點擊前后變化：
demo2點擊前后變化：
表面上，demo1只是調換了item1和item3的位置，點擊后也是就改變了item1和item3；而demo2三個都改變了。這時有人就會覺得使用index作為key改動DOM結構還更小，豈不是更好？
實際上，眼見不一定為實。我們看看真實的樣子：
demo1的改變前后對比：
demo2改變前后對比：
是不是震驚了！??！_demo2的list實際上的key和num一一對應著，并沒有改變_，只是順序不一樣了。而demo1還改變了兩個值。所以，這就是不能使用index作為key的原因之一了。
使用index作為key，會導致diff中的優(yōu)化失效（降低了復用性，違背了虛擬DOM的初衷）。原本可以復用的東西，不能被復用，徒然增加了性能開銷，浪費性能
（2）index不能作為key---情景二
接下來看看demo3，demo3將會淋漓盡致的展現(xiàn)index作為key的bug：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<item v-for="(item,index) in student" :key="index"></item>
//<item v-for="(item,index) in list" :key="item.id"></item>
</ul>
<button @click="change">change</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
list: [{
id: 0,
num: 1
}, {
id: 1,
num: 2
}, {
id: 2,
num: 3
}],
student: [1, 2, 3]
}
},
methods: {
//刪除數(shù)據(jù)
change() {
this.student.splice(0, 1)
//this.list.splice(0, 1)
}
},
components: {
item: {
template: `<div>{{Math.random()}}</div>`,
}
}
})
</script>
</body>
復制代碼
當刪除的時候，又會發(fā)生什么意想不到事情呢？
右圖是刪除之后的結果，驚訝的發(fā)現(xiàn)，我們_刪除的明明是第一個數(shù)據(jù)，而頁面展示是刪除了第三個數(shù)據(jù)_。小小的腦袋真的會有大大的疑問。但是通過虛擬DOM，你就會恍然大悟了。
當用index作為key時，因為diff算法會就地更新，會復用key:0的這個節(jié)點，比對的時候，key:0的節(jié)點存在，則比對key:1，也存在，而多出了key:2,則會將其刪除。
使用index作為key時，在刪除數(shù)據(jù)時，因為vue不會深入地區(qū)對比子組件的文本內(nèi)容，所以會錯誤移除VDOM中的節(jié)點（index的值是不固定的）。
這個例子，文本內(nèi)容使用的是隨機數(shù)，所以數(shù)據(jù)對不上不必太在意。另外，既然index的值不固定，不能作為key，那么擴展一下，可不可以使用隨機數(shù)作為key呢？答案自然是不能夠。因為key值無論是刪除還是反轉，根本就不能找到相同的key，diff算法就毫無意義了，壓根沒有復用性可言。
在這個demo3里，數(shù)據(jù)源放了list這個數(shù)據(jù)，可言嘗試循環(huán)它，來對比index作為key的結果，將會更加明顯哦。
關于本文
作者：來碗鹽焗星球
https://juejin.cn/post/7147174440025980935