Vue中key的作用示例代碼詳解
Vue中key的作用
key的特殊attribute主要用在Vue的虛擬DOM算法,在新舊Nodes對(duì)比時(shí)辨識(shí)VNodes。如果不使用key,Vue會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改、復(fù)用相同類型元素的算法,而使用key時(shí),它會(huì)基于key的變化重新排列元素順序,并且會(huì)移除key不存在的元素。此外有相同父元素的子元素必須有獨(dú)特的key,重復(fù)的key會(huì)造成渲染錯(cuò)誤。
描述
首先是官方文檔的描述,當(dāng)Vue正在更新使用v-for渲染的元素列表時(shí),它默認(rèn)使用就地更新的策略,如果數(shù)據(jù)項(xiàng)的順序被改變,Vue將不會(huì)移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的順序,而是就地更新每個(gè)元素,并且確保它們?cè)诿總€(gè)索引位置正確渲染。這個(gè)默認(rèn)的模式是高效的,但是只適用于不依賴子組件狀態(tài)或臨時(shí)DOM狀態(tài)的列表渲染輸出,例如表單輸入值。為了給Vue一個(gè)提示,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一 key attribute,建議盡可能在使用v-for時(shí)提供key attribute,除非遍歷輸出的DOM內(nèi)容非常簡(jiǎn)單,或者是刻意依賴默認(rèn)行為以獲取性能上的提升。
簡(jiǎn)單來說,當(dāng)在列表循環(huán)中使用key時(shí),需要使用key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí),diff算法就可以正確的識(shí)別此節(jié)點(diǎn),找到正確的位置直接操作節(jié)點(diǎn),盡可能地進(jìn)行重用元素,key的作用主要是為了高效的更新虛擬DOM。此外,使用index作為key是并不推薦的做法,其只能保證Vue在數(shù)據(jù)變化時(shí)強(qiáng)制更新組件,以避免原地復(fù)用帶來的副作用,但不能保證最大限度的元素重用,且使用index作為key在數(shù)據(jù)更新方面和不使用key的效果基本相同。
示例
首先定義一個(gè)Vue實(shí)例,渲染四個(gè)列表,分別為簡(jiǎn)單列表與復(fù)雜列表,以及其分別攜帶key與不攜帶key時(shí)對(duì)比其更新渲染時(shí)的速度,本次測(cè)試使用的是Chrome 81.0,每次在Console執(zhí)行代碼時(shí)首先會(huì)進(jìn)行刷新重新加載界面,避免瀏覽器以及Vue自身優(yōu)化帶來的影響。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in simpleListWithoutKey" >{{item}}</li>
</ul>
<ul>
<li v-for="item in simpleListWithKey" :key="item" >{{item}}</li>
</ul>
<ul>
<li v-for="item in complexListWithoutKey">
<span v-for="value in item.list" v-if="value > 5">{{value}}</span>
</li>
</ul>
<ul>
<li v-for="item in complexListWithKey" :key="item.id">
<span v-for="value in item.list" :key="value" v-if="value > 5">{{value}}</span>
</li>
</ul>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
simpleListWithoutKey: [1, 2, 3, 4, 5, 6],
simpleListWithKey: [1, 2, 3, 4, 5, 6],
complexListWithoutKey:[
{id: 1, list: [1, 2, 3]},
{id: 2, list: [4, 5, 6]},
{id: 3, list: [7, 8, 9]}
],
complexListWithKey:[
{id: 1, list: [1, 2, 3]},
{id: 2, list: [4, 5, 6]},
{id: 3, list: [7, 8, 9]}
],
}
})
</script>
</html>
簡(jiǎn)單列表
在簡(jiǎn)單列表的情況下,不使用key可能會(huì)比使用key的情況下在更新時(shí)的渲染速度更快,這也就是官方文檔中提到的,除非遍歷輸出的DOM內(nèi)容非常簡(jiǎn)單,或者是刻意依賴默認(rèn)行為以獲取性能上的提升。在下面的例子中可以看到?jīng)]有key的情況下列表更新時(shí)渲染速度會(huì)快,當(dāng)不存在key的情況下,這個(gè)列表直接進(jìn)行原地復(fù)用,原有的節(jié)點(diǎn)的位置不變,原地復(fù)用元素,將內(nèi)容更新為5、6、7、8、9、10,并添加了11與12兩個(gè)節(jié)點(diǎn),而存在key的情況下,原有的1、2、3、4節(jié)點(diǎn)被刪除,5、6節(jié)點(diǎn)保留,添加了7、8、9、10、11、12六個(gè)節(jié)點(diǎn),由于在DOM的增刪操作上比較耗時(shí),所以表現(xiàn)為不帶key的情況下速度更快一些。
// 沒有key的情況下 console.time(); vm.simpleListWithoutKey = [5, 6, 7, 8, 9, 10, 11, 12]; vm.$nextTick(() => console.timeEnd()); // default: 2.193056640625ms
// 存在key的情況下 console.time(); vm.simpleListWithKey = [5, 6, 7, 8, 9, 10, 11, 12]; vm.$nextTick(() => console.timeEnd()); // default: 3.2138671875ms
原地復(fù)用可能會(huì)帶來一些副作用,文檔中提到原地復(fù)用這個(gè)默認(rèn)的模式是高效的,但是只適用于不依賴子組件狀態(tài)或臨時(shí)DOM狀態(tài)的列表渲染輸出,例如表單輸入值。在不設(shè)置key的情況下,元素中沒有與數(shù)據(jù)data綁定的部分,Vue會(huì)默認(rèn)使用已經(jīng)渲染的DOM,而綁定了數(shù)據(jù)data的部分會(huì)進(jìn)行跟隨數(shù)據(jù)渲染,假如操作了元素位置,則元素中未綁定data的部分會(huì)停留在原地,而綁定了data的部分會(huì)跟隨操作進(jìn)行移動(dòng),在下面的例子中首先需要將兩個(gè)A之后的輸入框添加數(shù)據(jù)信息,這樣就制作了一個(gè)臨時(shí)狀態(tài),如果此時(shí)點(diǎn)擊下移按鈕,那么不使用key的組中的輸入框?qū)⒉粫?huì)跟隨下移,且B到了頂端并成為了紅色,而使用key的組中會(huì)將輸入框進(jìn)行下移,且A依舊是紅色跟隨下移。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>就地復(fù)用</title>
</head>
<body>
<div id="app">
<h3>采用就地復(fù)用策略(vuejs默認(rèn)情況)</h3>
<div v-for='(p, i) in persons'>
<span>{{p.name}}<span>
<input type="text"/>
<button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
</div>
<h3>不采用就地復(fù)用策略(設(shè)置key)</h3>
<div v-for='(p, i) in persons' :key='p.id'>
<span>{{p.name}}<span>
<input type="text"/>
<button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
</div>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
persons: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' },
{ id: 3, name: 'C' }
]
},
mounted: function(){
// 此DOM操作將兩個(gè)A的顏色設(shè)置為紅色 主要是為了演示原地復(fù)用
document.querySelectorAll("h3 + div > span:first-child").forEach( v => v.style.color="red");
},
methods: {
down: function(i) {
if (i == this.persons.length - 1) return;
var listClone = this.persons.slice();
var one = listClone[i];
listClone[i] = listClone[i + 1];
listClone[i + 1] = one;
this.persons = listClone;
}
}
});
</script>
</body>
</html>
<!-- 源于 https://www.zhihu.com/question/61078310 @霸都丶傲天 有修改-->
復(fù)雜列表
使用key不僅能夠避免上述的原地復(fù)用的副作用,且在一些操作上可能能夠提高渲染的效率,主要體現(xiàn)在重新排序的情況,包括在中間插入和刪除節(jié)點(diǎn)的操作,在下面的例子中沒有key的情況下重新排序會(huì)原地復(fù)用元素,但是由于v-if綁定了data所以會(huì)一并進(jìn)行操作,在這個(gè)DOM操作上比較消耗時(shí)間,而使用key得情況則直接復(fù)用元素,v-if控制的元素在初次渲染就已經(jīng)決定,在本例中沒有對(duì)其進(jìn)行更新,所以不涉及v-if的DOM操作,所以在效率上會(huì)高一些。
console.time();
vm.complexListWithoutKey = [
{id: 3, list: [7, 8, 9]},
{id: 2, list: [4, 5, 6]},
{id: 1, list: [1, 2, 3]},
];
vm.$nextTick(() => console.timeEnd());
vm.$nextTick(() => console.timeEnd());
// default: 4.100244140625ms
console.time();
vm.complexListWithKey = [
{id: 3, list: [7, 8, 9]},
{id: 2, list: [4, 5, 6]},
{id: 1, list: [1, 2, 3]},
];
vm.$nextTick(() => console.timeEnd());
// default: 3.016064453125ms
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://cn.vuejs.org/v2/api/#key
http://www.dhdzp.com/article/146991.htm
https://www.zhihu.com/question/61078310
http://www.dhdzp.com/article/167590.htm
http://www.dhdzp.com/article/135934.htm
http://www.dhdzp.com/article/184127.htm
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1
https://cn.vuejs.org/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81
總結(jié)
到此這篇關(guān)于Vue中key的作用的文章就介紹到這了,更多相關(guān)vue key 作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密的實(shí)現(xiàn)
本文主要介紹了vue使用JSEncrypt對(duì)密碼本地存儲(chǔ)時(shí)加解密,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例
很多時(shí)候我們需要使用地址三級(jí)聯(lián)動(dòng),即省市區(qū)三級(jí)聯(lián)動(dòng),這篇文章主要介紹了Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例,感興趣的小伙伴們可以參考一下2018-06-06
Vue如何使用Promise.all()方法并行執(zhí)行多個(gè)請(qǐng)求
在Vue中,可以使用Promise.all()方法并行執(zhí)行多個(gè)異步請(qǐng)求,當(dāng)所有請(qǐng)求都成功返回時(shí),Promise.all()將返回一個(gè)包含所有請(qǐng)求結(jié)果的數(shù)組,如果其中任何一個(gè)請(qǐng)求失敗,則會(huì)觸發(fā)catch()方法并返回錯(cuò)誤信息,這種方式可以顯著提高程序的性能和響應(yīng)速度2025-01-01

