Vue中key的詳細(xì)解析

這篇文章主要講解了Vue中key的詳細(xì)解析，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

創(chuàng)新互聯(lián)是專業(yè)的合水網(wǎng)站建設(shè)公司，合水接單;提供成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行合水網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

Vue中key的作用

key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改、復(fù)用相同類型元素的算法，而使用key時，它會基于key的變化重新排列元素順序，并且會移除key不存在的元素。此外有相同父元素的子元素必須有獨特的key，重復(fù)的key會造成渲染錯誤。

描述

首先是官方文檔的描述，當(dāng)Vue正在更新使用v-for渲染的元素列表時，它默認(rèn)使用就地更新的策略，如果數(shù)據(jù)項的順序被改變，Vue將不會移動DOM元素來匹配數(shù)據(jù)項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染。這個默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時DOM狀態(tài)的列表渲染輸出，例如表單輸入值。為了給Vue一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key attribute，建議盡可能在使用v-for時提供key attribute，除非遍歷輸出的DOM內(nèi)容非常簡單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升。

簡單來說，當(dāng)在列表循環(huán)中使用key時，需要使用key來給每個節(jié)點做一個唯一標(biāo)識，diff算法就可以正確的識別此節(jié)點，找到正確的位置直接操作節(jié)點，盡可能地進(jìn)行重用元素，key的作用主要是為了高效的更新虛擬DOM。此外，使用index作為key是并不推薦的做法，其只能保證Vue在數(shù)據(jù)變化時強(qiáng)制更新組件，以避免原地復(fù)用帶來的副作用，但不能保證最大限度的元素重用，且使用index作為key在數(shù)據(jù)更新方面和不使用key的效果基本相同。

示例

首先定義一個Vue實例，渲染四個列表，分別為簡單列表與復(fù)雜列表，以及其分別攜帶key與不攜帶key時對比其更新渲染時的速度，本次測試使用的是Chrome 81.0，每次在Console執(zhí)行代碼時首先會進(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>

簡單列表

在簡單列表的情況下，不使用key可能會比使用key的情況下在更新時的渲染速度更快，這也就是官方文檔中提到的，除非遍歷輸出的DOM內(nèi)容非常簡單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升。在下面的例子中可以看到?jīng)]有key的情況下列表更新時渲染速度會快，當(dāng)不存在key的情況下，這個列表直接進(jìn)行原地復(fù)用，原有的節(jié)點的位置不變，原地復(fù)用元素，將內(nèi)容更新為5、6、7、8、9、10，并添加了11與12兩個節(jié)點，而存在key的情況下，原有的1、2、3、4節(jié)點被刪除，5、6節(jié)點保留，添加了7、8、9、10、11、12六個節(jié)點，由于在DOM的增刪操作上比較耗時，所以表現(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ù)用可能會帶來一些副作用，文檔中提到原地復(fù)用這個默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時DOM狀態(tài)的列表渲染輸出，例如表單輸入值。在不設(shè)置key的情況下，元素中沒有與數(shù)據(jù)data綁定的部分，Vue會默認(rèn)使用已經(jīng)渲染的DOM，而綁定了數(shù)據(jù)data的部分會進(jìn)行跟隨數(shù)據(jù)渲染，假如操作了元素位置，則元素中未綁定data的部分會停留在原地，而綁定了data的部分會跟隨操作進(jìn)行移動，在下面的例子中首先需要將兩個A之后的輸入框添加數(shù)據(jù)信息，這樣就制作了一個臨時狀態(tài)，如果此時點擊下移按鈕，那么不使用key的組中的輸入框?qū)⒉粫S下移，且B到了頂端并成為了紅色，而使用key的組中會將輸入框進(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">
 <h4>采用就地復(fù)用策略(vuejs默認(rèn)情況)</h4>
 <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> 

 <h4>不采用就地復(fù)用策略(設(shè)置key)</h4>
 <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操作將兩個A的顏色設(shè)置為紅色 主要是為了演示原地復(fù)用
 document.querySelectorAll("h4 + 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é)點的操作，在下面的例子中沒有key的情況下重新排序會原地復(fù)用元素，但是由于v-if綁定了data所以會一并進(jìn)行操作，在這個DOM操作上比較消耗時間，而使用key得情況則直接復(fù)用元素，v-if控制的元素在初次渲染就已經(jīng)決定，在本例中沒有對其進(jìn)行更新，所以不涉及v-if的DOM操作，所以在效率上會高一些。

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

看完上述內(nèi)容，是不是對Vue中key的詳細(xì)解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：Vue中key的詳細(xì)解析
鏈接URL：http://bm7419.com/article32/psdipc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、定制網(wǎng)站、建站公司、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容