Vue中key的作用及原理詳解
1. 先說結(jié)論
- key在Vue是DOM對(duì)象的標(biāo)識(shí)；
- 進(jìn)行列表展示時(shí)，默認(rèn)key是index；
- 如果數(shù)據(jù)只做展示使用，使用index作為key是沒有任何問題的；
- 如果使用index作為key，而后續(xù)操作會(huì)破壞順序，一定會(huì)帶來效率問題，嚴(yán)重時(shí)會(huì)渲染出錯(cuò)誤的DOM
關(guān)于key的作用及實(shí)現(xiàn)原理，下面一一道來。
2. key的作用
key就是一個(gè)標(biāo)識(shí)，被使用在Vue中。再詳細(xì)一點(diǎn)，key被使用在Vue中的虛擬DOM中，并不會(huì)出現(xiàn)在真實(shí)DOM中。
2.1 舉一個(gè)例子
以列表的形式展示一組人員信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>key的原理</title>
<!--引入vue-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<div id="root">
<h2>人員列表</h2>
<ul>
<li v-for="(p,index) in persons">
{{p.name}}-{{p.age}}
</li>
</ul>
</div>
<body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
persons:[
{'id':'001', 'name':'張三','age':'18'},
{'id':'002', 'name':'李四','age':'19'},
{'id':'003', 'name':'王五','age':'20'}
]
}
})
</script>
</body>
</html>
這個(gè)html文件在瀏覽器中打開如下圖所示。
而上述示例html文件中并沒有使用到key，似乎也沒有問題。當(dāng)然，單純地展示數(shù)據(jù)，不寫key是不會(huì)存在問題的。
現(xiàn)在我們?yōu)樯鲜鍪纠由蟢ey，這里以每條數(shù)據(jù)的id為key
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}}-{{p.age}}
</li>
加上key的展示結(jié)果和上圖結(jié)果一模一樣。
而如果我們?cè)跒g覽器上查看元素，不會(huì)看到key的存在。
截至目前，我們可以得到兩個(gè)結(jié)論：1. 只做數(shù)據(jù)展示用，不寫key是沒有任何影響的；2.key不會(huì)出現(xiàn)在真實(shí)DOM中
實(shí)際上，即使不寫key，Vue在生成真實(shí)DOM時(shí)，也用到了key，默認(rèn)是數(shù)據(jù)索引（index）
我們把key替換為index，展示的數(shù)據(jù)不會(huì)產(chǎn)生任何改變。
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
</li>
2.2 修改一下上述示例
在展示人員信息的基礎(chǔ)上顯示索引，并且添加一個(gè)按鈕，功能是在頭部添加人員信息
對(duì)上述html文件稍加修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>key的原理</title>
<!--引入vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
</head>
<div id="root">
<h2>人員列表</h2>
<button @click="add">添加一個(gè)老劉</button>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}-{{index}}
</li>
</ul>
</div>
<body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
persons:[
{'id':'001', 'name':'張三','age':'18'},
{'id':'002', 'name':'李四','age':'19'},
{'id':'003', 'name':'王五','age':'20'}
]
},
methods:{
add(){
const p = {'id':'004', 'name':'老劉','age':'40'}
this.persons.unshift(p)
}
}
})
</script>
</body>
</html>
我們可以看到，張三、李四、王五的索引分為別0，1，2
點(diǎn)擊按鈕，添加一個(gè)新人物，這個(gè)時(shí)候索引發(fā)生了變化，新添加的人物“老劉”變?yōu)榱怂饕?，似乎對(duì)，也似乎不對(duì)
當(dāng)然，單純地討論索引，這里一點(diǎn)問題也沒有，下面舉一個(gè)新例子，來說說“不對(duì)“在哪里
2.3 再修改一下示例
不展示索引了，改為輸入框，在每個(gè)人物后面的輸入框內(nèi)寫上人物的姓，觀察新插入數(shù)據(jù)后原始數(shù)據(jù)的變化
稍微修改一下html
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}}
<input type="text">
</li>
實(shí)際效果就是下圖這樣
到這里，似乎沒有什么不對(duì)，接下來就是見證奇跡的時(shí)刻
添加老劉，出現(xiàn)了問題，和我們預(yù)想的不一樣。
這是key為index的情況，如果修改為數(shù)據(jù)的唯一標(biāo)識(shí)，則不會(huì)產(chǎn)生這樣的問題。
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}}-{{p.age}}
<input type="text">
</li>
誒，這就是我們想要的。
列表內(nèi)有輸入內(nèi)容，后續(xù)操作會(huì)破壞原始順序，就會(huì)產(chǎn)生錯(cuò)誤DOM
3. key的實(shí)現(xiàn)原理
要解釋key的實(shí)現(xiàn)原理，就要引入Vue一個(gè)十分重要的概念——【虛擬DOM】。
給出一組數(shù)據(jù)，Vue要把這些數(shù)據(jù)渲染到頁面上，首先要生成【虛擬DOM】，然后根據(jù)【虛擬DOM】去生成【真實(shí)的DOM】。如果數(shù)據(jù)發(fā)生了改變，Vue會(huì)生成【新的虛擬DOM】，注意，這個(gè)【新的虛擬DOM】并不會(huì)直接生成【新的真實(shí)DOM】，否則虛擬DOM一點(diǎn)用處也沒有了。Vue的操作是，拿根據(jù)新的數(shù)據(jù)生成的【新的虛擬DOM】與之前的【真實(shí)的DOM】去做比較，如果相同，直接延用即可（“拿來主義”）；如果不同，則生成新的DOM對(duì)象。
在這個(gè)過程中key扮演了很重要的角色。
根據(jù)最后一個(gè)示例進(jìn)行剖析。
1. key為index的情況。
根據(jù)數(shù)據(jù)生成【真實(shí)DOM】的流程如下：（注意，下圖的真實(shí)DOM中輸入框里的內(nèi)容為生成頁面后手動(dòng)添加）
然后，添加人物“老劉”，獲取到一組新數(shù)據(jù)
Vue拿新數(shù)據(jù)生成【新的虛擬DOM】
在生成真實(shí)DOM，就需要用新生成的虛擬DOM和原來的真實(shí)DOM作比較（一條一條分析）
對(duì)比第一條，key為0，找到舊DOM中key為0的數(shù)據(jù)，發(fā)現(xiàn)“老劉-40”和“張三-18”不同，渲染新的數(shù)據(jù)“老劉-40”到頁面上；再往后，發(fā)現(xiàn)同為輸入框，不必重新渲染，直接使用原來真實(shí)DOM的內(nèi)容。第一條內(nèi)容就出現(xiàn)了，而這個(gè)輸入框還攜帶有張三的姓。
對(duì)比第二條，key為1，找到舊DOM中key為1的數(shù)據(jù)，發(fā)現(xiàn)“張三-18”和“李四-19”不同，渲染新的數(shù)據(jù)“張三-18”到頁面上；再往后，發(fā)現(xiàn)同為輸入框，不必重新渲染，直接使用原來真實(shí)DOM的內(nèi)容。第二條內(nèi)容就出現(xiàn)了，而這個(gè)輸入框還攜帶有李四的姓。
之后同理。
回顧這個(gè)過程，key是作為虛擬DOM中對(duì)象的唯一標(biāo)識(shí)，標(biāo)識(shí)出了數(shù)據(jù)的“身份信息”，Vue在虛擬DOM中會(huì)根據(jù)這個(gè)“身份標(biāo)識(shí)”去對(duì)比內(nèi)容，設(shè)計(jì)的初衷是為了節(jié)省資源開支，不必渲染重復(fù)的部分。在本示例中，不但帶來了效率問題，還渲染出了錯(cuò)誤的DOM，后果非常嚴(yán)重。
2. key為id的情況。
直接進(jìn)入添加“老劉”后的新舊DOM對(duì)比。
對(duì)比第一條，key為‘004'，發(fā)現(xiàn)在舊DOM中并不存在，直接生成“老劉-40”和新的輸入框。
對(duì)比第二條，key為‘001'，發(fā)現(xiàn)舊DOM中key為‘001'的數(shù)據(jù)相同，直接將“張三-18”和輸入框拿過來使用。
……
最后生成正確的DOM，節(jié)省了資源開支。
總結(jié)
推薦使用數(shù)據(jù)的唯一標(biāo)識(shí)作為key，比如id，身份證號(hào)，手機(jī)號(hào)等等，通常這些數(shù)據(jù)由后端提供。
后續(xù)操作不破壞原來數(shù)據(jù)順序的話，使用index作為key也沒有任何問題。
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
vue,uniapp--js禁止頁面滾動(dòng),取消滾動(dòng)方式
這篇文章主要介紹了vue,uniapp--js禁止頁面滾動(dòng),取消滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項(xiàng)目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3路由進(jìn)階實(shí)戰(zhàn)教程之參數(shù)傳遞與導(dǎo)航守衛(wèi)核心技術(shù)
本文介紹了路由參數(shù)傳遞的進(jìn)階應(yīng)用技巧,包括路由配置與參數(shù)驗(yàn)證、組件參數(shù)接收、查詢參數(shù)傳遞、導(dǎo)航守衛(wèi)以及性能優(yōu)化與最佳實(shí)踐,感興趣的朋友一起看看吧2025-03-03
Vue 中使用虛擬 dom 且根據(jù) diff 算法進(jìn)行新舊 DOM 對(duì)比，從而更新真實(shí) dom ，key 是虛擬 DOM 對(duì)象的唯一標(biāo)識(shí), 在 diff 算法中 key 起著極其重要的作用，本文講解 key 的作用以及為什么最好不要使用 index 作為 key 的屬性值2021-11-11
這篇文章主要介紹了vue-ls vue本地儲(chǔ)存的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于vue指令和插值的相關(guān)資料,大家應(yīng)該對(duì)指令和插值都不陌生,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue腳手架文件結(jié)構(gòu)及加載過程淺談,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了詳解Vue SPA項(xiàng)目優(yōu)化小記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法
這篇文章主要介紹了vue2.0頁面前進(jìn)刷新回退不刷新的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07