在vue中為什么不能用index作為key
前言;
??？不是吧，在vue中，不能使用index作為key呢？使用index作為key又好理解又方便，為什么不能使用呢？看文章就知道啦~.
一、key的作用是什么？
key的作用眾所周知，看一個(gè)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可以沒有，沒有也可以運(yùn)行并且不會(huì)報(bào)錯(cuò)，但是建議加上key。
另外，我們必須知道，vue中key運(yùn)用的地方------配合v-for使用。key是vue中虛擬dom標(biāo)記的唯一標(biāo)識(shí)，通過這個(gè)key，diff算法能更加準(zhǔn)確和快捷。不使用key的情況下，因?yàn)関ue的就地更新會(huì)選擇復(fù)用節(jié)點(diǎn)，之前的狀態(tài)被保存，可能會(huì)產(chǎn)生一系列的bug。另外，key的唯一性可以被map數(shù)據(jù)結(jié)構(gòu)充分利用，時(shí)間復(fù)雜度僅為o（1）。
簡(jiǎn)單來說，key是唯一標(biāo)識(shí)，為了讓diff算法更準(zhǔn)確的找到需要被對(duì)比的兩個(gè)節(jié)點(diǎn)。
二、什么是虛擬DOM？
虛擬DOM結(jié)構(gòu)就是一個(gè)對(duì)象而已，其中描述了每一層容器的特征。在beroreCreated執(zhí)行的時(shí)候，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結(jié)構(gòu)，不考慮性能的時(shí)候
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結(jié)構(gòu)，而不是編譯：
vnode = {
? ?tag: 'ul',
? ?children: [
? ? ? {
? ? ? ? ? ?tag: 'li',
? ? ? ? ? ? ? ?children: [{
? ? ? ? ? ? ? ? ? ?vnode: {
? ? ? ? ? ? ? ? ? ? ? ?text: '1'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }]
},
? ? ? {
? ? ? ? ? ?tag: 'li',
? ? ? ? ? ? ? ?children: [{
? ? ? ? ? ? ? ? ? ?vnode: {
? ? ? ? ? ? ? ? ? ? ? ?text: '2'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }]
? ? ? },
? ? ? {
? ? ? ? ? ?tag: 'li',
? ? ? ? ? ? ? ?children: [{
? ? ? ? ? ? ? ? ? ?vnode: {
? ? ? ? ? ? ? ? ? ? ? ?text: '3'
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }]
? ? ? },
? ]
}再將html編寫成真實(shí)的DOM結(jié)構(gòu)：
再編譯成真實(shí)DOM結(jié)構(gòu)
<li>1</li>
<li>2</li>
<li>3</li>虛擬DOM存在的意義就是，減少真實(shí)DOM結(jié)構(gòu)的操作，對(duì)于瀏覽器來說，減少開銷，提高性能。
三、什么是diff算法?
只要數(shù)據(jù)源發(fā)生變化，就一定會(huì)觸發(fā)watcher觀察者函數(shù)（Object。defineProperty（））的回調(diào)函數(shù)，去驅(qū)動(dòng)視圖更新，(加_是為了表明這是vue自帶的方法)
回調(diào)：
vm._update(vm._render()), _render會(huì)生成vnode _update會(huì)拿著vnoe去__patch__去查找不同 __patch__中啟動(dòng)的就是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 >當(dāng)點(diǎn)擊按鈕change以后，list反轉(zhuǎn)變?yōu)椋簂ist:[3,2,1]，diff算法會(huì)根據(jù)DOM樹，從上到下，從左到右判斷值是否更新。問題是，為什么diff就知道誰跟誰去進(jìn)行比對(duì)呢？這就是key的作用了，key是唯一標(biāo)識(shí)符，diff算法會(huì)根據(jù)key去比對(duì)。
四、為什么不能用index作為key？
基于前三者的知識(shí)基礎(chǔ)，我們才能更好地理解，為什么不能用index作為key？這里將通過三個(gè)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。需要注意的是，當(dāng)我們點(diǎn)擊change按鈕以后，注意觀察代碼是如何變化的：
demo1點(diǎn)擊前后變化：
demo2點(diǎn)擊前后變化：
表面上，demo1只是調(diào)換了item1和item3的位置，點(diǎn)擊后也是就改變了item1和item3；而demo2三個(gè)都改變了。這時(shí)有人就會(huì)覺得使用index作為key改動(dòng)DOM結(jié)構(gòu)還更小，豈不是更好？
實(shí)際上，眼見不一定為實(shí)。我們看看真實(shí)的樣子：
demo1的改變前后對(duì)比：
demo2改變前后對(duì)比：
是不是震驚了?。?！demo2的list實(shí)際上的key和num一一對(duì)應(yīng)著，并沒有改變，只是順序不一樣了。而demo1還改變了兩個(gè)值。所以，這就是不能使用index作為key的原因之一了。
使用index作為key，會(huì)導(dǎo)致diff中的優(yōu)化失效（降低了復(fù)用性，違背了虛擬DOM的初衷）。原本可以復(fù)用的東西，不能被復(fù)用，徒然增加了性能開銷，浪費(fèi)性能
（2）index不能作為key---情景二
接下來看看demo3，demo3將會(huì)淋漓盡致的展現(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>當(dāng)刪除的時(shí)候，又會(huì)發(fā)生什么意想不到事情呢？
右圖是刪除之后的結(jié)果，驚訝的發(fā)現(xiàn)，我們刪除的明明是第一個(gè)數(shù)據(jù)，而頁面展示是刪除了第三個(gè)數(shù)據(jù)。小小的腦袋真的會(huì)有大大的疑問。但是通過虛擬DOM，你就會(huì)恍然大悟了。
當(dāng)用index作為key時(shí)，因?yàn)閐iff算法會(huì)就地更新，會(huì)復(fù)用key:0的這個(gè)節(jié)點(diǎn)，比對(duì)的時(shí)候，key:0的節(jié)點(diǎn)存在，則比對(duì)key:1，也存在，而多出了key:2,則會(huì)將其刪除。
使用index作為key時(shí)，在刪除數(shù)據(jù)時(shí)，因?yàn)関ue不會(huì)深入地區(qū)對(duì)比子組件的文本內(nèi)容，所以會(huì)錯(cuò)誤移除VDOM中的節(jié)點(diǎn)（index的值是不固定的）。
這個(gè)例子，文本內(nèi)容使用的是隨機(jī)數(shù)，所以數(shù)據(jù)對(duì)不上不必太在意。另外，既然index的值不固定，不能作為key，那么擴(kuò)展一下，可不可以使用隨機(jī)數(shù)作為key呢？答案自然是不能夠。因?yàn)閗ey值無論是刪除還是反轉(zhuǎn)，根本就不能找到相同的key，diff算法就毫無意義了，壓根沒有復(fù)用性可言。
在這個(gè)demo3里，數(shù)據(jù)源放了list這個(gè)數(shù)據(jù)，可言嘗試循環(huán)它，來對(duì)比index作為key的結(jié)果，將會(huì)更加明顯哦。
到此這篇關(guān)于在vue中為什么不能用index作為key的文章就介紹到這了,更多相關(guān)vue index key內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript forEach中return失效問題解決方案
這篇文章主要介紹了JavaScript forEach中return失效問題解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
這段js代碼得節(jié)約你多少時(shí)間，學(xué)習(xí)js的朋友可以參考下。2011-12-12
微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的3d輪播圖效果,結(jié)合實(shí)例形式分析了微信小程序基于swiper組件相關(guān)屬性設(shè)置、事件響應(yīng)操作技巧,需要的朋友可以參考下2018-12-12
在前端開發(fā)中,我們經(jīng)常需要和后端進(jìn)行數(shù)據(jù)交互,下面這篇文章主要給大家介紹了關(guān)于前端到后端的數(shù)組傳輸?shù)娜N高效方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案
這篇文章主要介紹了詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了JavaScript邏輯And運(yùn)算符，在JavaScript中，邏輯 AND 運(yùn)算符用雙和號(hào)（&&）表示2015-12-12
js實(shí)現(xiàn)form自動(dòng)完成功能
2008-02-02
微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫反饋的多條數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫反饋的多條數(shù)據(jù)功能,涉及微信小程序wx.request訪問php后臺(tái)及返回結(jié)果的顯示布局相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
javascript中內(nèi)置對(duì)象Math的介紹及用法案例
Math對(duì)象是一個(gè)內(nèi)置對(duì)象,具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法,不是一個(gè)函數(shù)對(duì)象,下面這篇文章主要給大家介紹了關(guān)于javascript中內(nèi)置對(duì)象Math的介紹及用法案例的相關(guān)資料,需要的朋友可以參考下2022-03-03