Vue中key的作用示例代碼詳解
Vue中key的作用
key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態元素并且盡可能的嘗試就地修改、復用相同類型元素的算法，而使用key時，它會基于key的變化重新排列元素順序，并且會移除key不存在的元素。此外有相同父元素的子元素必須有獨特的key，重復的key會造成渲染錯誤。
描述
首先是官方文檔的描述，當Vue正在更新使用v-for渲染的元素列表時，它默認使用就地更新的策略，如果數據項的順序被改變，Vue將不會移動DOM元素來匹配數據項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染。這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時DOM狀態的列表渲染輸出，例如表單輸入值。為了給Vue一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute，建議盡可能在使用v-for時提供key attribute，除非遍歷輸出的DOM內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。
簡單來說，當在列表循環中使用key時，需要使用key來給每個節點做一個唯一標識，diff算法就可以正確的識別此節點，找到正確的位置直接操作節點，盡可能地進行重用元素，key的作用主要是為了高效的更新虛擬DOM。此外，使用index作為key是并不推薦的做法，其只能保證Vue在數據變化時強制更新組件，以避免原地復用帶來的副作用，但不能保證最大限度的元素重用，且使用index作為key在數據更新方面和不使用key的效果基本相同。
示例
首先定義一個Vue實例，渲染四個列表，分別為簡單列表與復雜列表，以及其分別攜帶key與不攜帶key時對比其更新渲染時的速度，本次測試使用的是Chrome 81.0，每次在Console執行代碼時首先會進行刷新重新加載界面，避免瀏覽器以及Vue自身優化帶來的影響。
<!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內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。在下面的例子中可以看到沒有key的情況下列表更新時渲染速度會快，當不存在key的情況下，這個列表直接進行原地復用，原有的節點的位置不變，原地復用元素，將內容更新為5、6、7、8、9、10，并添加了11與12兩個節點，而存在key的情況下，原有的1、2、3、4節點被刪除，5、6節點保留，添加了7、8、9、10、11、12六個節點，由于在DOM的增刪操作上比較耗時，所以表現為不帶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
原地復用可能會帶來一些副作用，文檔中提到原地復用這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時DOM狀態的列表渲染輸出，例如表單輸入值。在不設置key的情況下，元素中沒有與數據data綁定的部分，Vue會默認使用已經渲染的DOM，而綁定了數據data的部分會進行跟隨數據渲染，假如操作了元素位置，則元素中未綁定data的部分會停留在原地，而綁定了data的部分會跟隨操作進行移動，在下面的例子中首先需要將兩個A之后的輸入框添加數據信息，這樣就制作了一個臨時狀態，如果此時點擊下移按鈕，那么不使用key的組中的輸入框將不會跟隨下移，且B到了頂端并成為了紅色，而使用key的組中會將輸入框進行下移，且A依舊是紅色跟隨下移。
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width'> <title>就地復用</title></head><body> <div id='app'> <h3>采用就地復用策略(vuejs默認情況)</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>不采用就地復用策略(設置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操作將兩個A的顏色設置為紅色 主要是為了演示原地復用 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 @霸都丶傲天 有修改-->
復雜列表
使用key不僅能夠避免上述的原地復用的副作用，且在一些操作上可能能夠提高渲染的效率，主要體現在重新排序的情況，包括在中間插入和刪除節點的操作，在下面的例子中沒有key的情況下重新排序會原地復用元素，但是由于v-if綁定了data所以會一并進行操作，在這個DOM操作上比較消耗時間，而使用key得情況則直接復用元素，v-if控制的元素在初次渲染就已經決定，在本例中沒有對其進行更新，所以不涉及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
每日一題
https://github.com/WindrunnerMax/EveryDay
參考
https://cn.vuejs.org/v2/api/#keyhttps://www.jb51.net/article/146991.htmhttps://www.zhihu.com/question/61078310https://www.jb51.net/article/167590.htm
https://www.jb51.net/article/135934.htmhttps://www.jb51.net/article/184127.htmhttps://github.com/Advanced-Frontend/Daily-Interview-Question/issues/1https://cn.vuejs.org/v2/guide/list.html#%E7%BB%B4%E6%8A%A4%E7%8A%B6%E6%80%81
總結
到此這篇關于Vue中key的作用的文章就介紹到這了,更多相關vue key 作用內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備