前言
在vue中使用v-for時需要，都會提示或要求使用 :key，有的的開發者會直接使用陣列的 index 作為 key 的值，但不建議直接使用 index作為 key 的值，有時我們面試時也會遇到面試官問：為什么不推薦使用 index 作為 key ？接下來和小穎一起來瞅瞅吧
為什么要有 key
官網解釋
當 Vue 正在更新使用 v-for 渲染的元素串列時，它默認使用“就地更新”的策略，如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染，這個類似 Vue 1.x 的 track-by="$index"，
這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的串列渲染輸出，
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute：
key的作用
官網解釋：key
預期：number | string | boolean (2.4.2 新增) | symbol (2.5.12 新增)
key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes，如果不使用 key，Vue 會使用一種最大限度減少動態元素并且盡可能的嘗試就地修改/復用相同型別元素的演算法，而使用 key 時，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素，
有相同父元素的子元素必須有獨特的 key，重復的 key 會造成渲染錯誤，
通俗解釋：
key 在 diff 演算法的作用，就是用來判斷是否是同一個節點，
Vue 中使用虛擬 dom 且根據 diff 演算法進行新舊 DOM 對比，從而更新真實 dom ，key 是虛擬 DOM 物件的唯一標識, 在 diff 演算法中 key 起著極其重要的作用，key可以管理可復用的元素，減少不必要的元素的重新渲染,也要讓必要的元素能夠重新渲染，
為什么key 值不建議用index？
性能消耗
使用 index 做 key，破壞順序操作的時候， 因為每一個節點都找不到對應的 key，導致部分節點不能復用,所有的新 vnode 都需要重新創建，
示例：
<template>
<div >
<ul>
<li v-for="(item,index) in studentList" :key="index">{{ item.name }}</li>
</ul>
<br>
<button @click="addStudent">添加一條資料</button>
</div>
</template>
<script>
export default {
name: 'ceshi',
data() {
return {
studentList: [
{id: 1, name: '張三', age: 18},
{id: 2, name: '李四', age: 19},
{id: 3, name: '王麻子', age: 20},
],
};
},
methods: {
addStudent() {
const studentObj = {id: 4, name: '王五', age: 20};
this.studentList = [studentObj, ...this.studentList]
}
}
}
</script>
打開瀏覽器的開發工具，修改資料的文本，后面加上 “-我沒變”，點擊添加一條資料 按鈕，則發現dom整體都變了
當給key系結唯一不重復的值時：
<li v-for="item in studentList" :key="item.id">{{ item.name }}</li>
打開瀏覽器的開發工具，修改資料的文本，后面加上 “-我沒變”，點擊添加一條資料 按鈕，則發現只是頂部多了一條，其他dom沒有重新渲染，
當用index做key時，當我們在前面加了一條資料時 index 順序就會被打斷，導致新節點 key 全部都改變了，所以導致我們頁面上的資料都被重新渲染了，而用了不會重復的唯一標識id時，diff演算法比較后發現只有頭部有變化，其他沒有變，則只給頭部新增了一個元素，從上面比較可以看出，用唯一值作為 key 可以節約開銷這樣大家應該就明白了吧·················
參考：在 Vue 中為什么不推薦用 index 做 key
資料錯位
示例：
<template> <div class="hello"> <ul> <li v-for="item in studentList" :key="item.id">{{ item.name }}<input /></li> </ul> <br> <button @click="addStudent">添加一條資料</button> </div> </template> <script> export default { name: 'ceshi', data() { return { studentList: [ {id: 1, name: '張三', age: 18}, {id: 2, name: '李四', age: 19} ], }; }, methods: { addStudent() { const studentObj = {id: 4, name: '王五', age: 20}; this.studentList = [studentObj, ...this.studentList] } } } </script>
我們往 input 里面輸入一些值，添加一位同學看下效果：
這時候我們就會發現，在添加之前輸入的資料錯位了，添加之后王五的輸入框殘留著張三的資訊，這很顯然不是我們想要的結果，
從上面比對可以看出來這時因為采用 index 作為 key 時，當在比較時，發現雖然文本值變了，但是當繼續向下比較時發現 DOM 節點還是和原來一摸一樣，就復用了，但是沒想到 input 輸入框殘留輸入的值，這時候就會出現輸入的值出現錯位的情況
當我們將key系結為唯一標識id時，如圖所示，key 相同的節點都做到了復用，起到了diff 演算法的真正作用，
總結：
- 用 index 作為 key 時，在對資料進行，逆序添加，逆序洗掉等破壞順序的操作時，會產生沒必要的真實 DOM更新，從而導致效率低
- 用 index 作為 key 時，如果結構中包含輸入類的 DOM，會產生錯誤的 DOM 更新
- 在開發中最好每條資料使用唯一標識固定的資料作為 key，比如后臺回傳的 ID，手機號，身份證號等唯一值
- 如果不對資料進行逆序添加 逆序洗掉破壞順序的操作， 只用于串列展示的話 使用index 作為Key沒有毛病
相關內容
為什么要提出虛擬DOM
在Web早期，頁面的互動比較簡單，沒有復雜的狀態需要管理，也不太需要頻繁的操作DOM，隨著時代的發展，頁面上的功能越來越多，我們需要實作的需求也越來越復雜，DOM的操作也越來越頻繁，通過js操作DOM的代價很高，因為會引起頁面的重排重繪，增加瀏覽器的性能開銷，降低頁面渲染速度，既然操作DOM的代價很高那么有沒有那種方式可以減少對DOM的操作？這就是為什么提出虛擬DOM一個很重要的原因， 參考： 淺談Vue中的虛擬DOM 虛擬DOM就是為了解決瀏覽器性能問題而被設計出來的，若一次操作中有10次更新DOM的動作，虛擬DOM不會立即操作DOM，而是將這10次更新的diff內容保存到本地一個JS物件中，最終將這個JS物件一次性attch到DOM樹上，再進行后續操作，避免大量無謂的計算量，所以，用JS物件模擬DOM節點的好處是，頁面的更新可以先全部反映在JS物件(虛擬DOM)上，操作記憶體中的JS物件的速度顯然要更快，等更新完成后，再將最終的JS物件映射成真實的DOM，交由瀏覽器去繪制， 參考： VUE中key的作用與diff演算法 簡而言之呢 頻繁的操作DOM會影響瀏覽器的性能，為了解決這個問題從而提出了 虛擬DOM，虛擬DOM是用javascript物件表示的，而操作javascript是很簡便高效的，虛擬DOM和真正的DOM有一層映射關系，很多需要操作DOM的地方都會去操作虛擬DOM，最后統一一次更新DOM， 因而可以提高性能，附加面試題：
如果有許多次操作dom的動作，vue中是怎么更新dom的？ vue中不會立即操作dom，而是將要更新的diff內容保存到新的虛擬dom物件中，通過diff演算法后得到最終的虛擬dom，將其映射成真是的dom更新視圖，虛擬DOM是什么
Vue.js通過編譯將模版轉換成渲染函式(render)，執行渲染函式就可以得到一個以vnode節點(JavaScript物件)作為基礎的樹形結構，vnode節點里面包含標簽名(tag)、屬性(attrs)和子元素物件(children)等等屬性，這個樹形結構就是Virtual DOM，簡單來說，可以把Virtual DOM理解為一個樹形結構的JS物件，
參考： 淺談Vue中的虛擬DOM
簡而言之 虛擬DON就是javascript物件，通過對虛擬 DOM進行diff，算出最小差異，然后更新真實的DOM，
虛擬DOM的優勢
- 提供一種方便的工具，使得開發效率得到保證
- 保證最小化的DOM操作，使得執行效率得到保證
- 具備跨平臺的優勢 由于 Virtual DOM 是以 JavaScript 物件為基礎而不依賴真實平臺環境，所以使它具有了跨平臺的能力，比如說瀏覽器平臺、Weex、Node 等，
- 提升渲染性能 Virtual DOM的優勢不在于單次的操作，而是在大量、頻繁的資料更新下，能夠對視圖進行合理、高效的更新
參考：vue 中虛擬dom的理解、淺談Vue中的虛擬DOM
為什么虛擬DOM可以提高渲染速度
- 根據虛擬dom樹最初渲染成真實dom
- 當資料變化，或者說是頁面需要重新渲染的時候，會重新生成一個新的完整的虛擬dom
- 拿新的虛擬dom來和舊的虛擬dom做對比（使用diff演算法），得到需要更新的地方之后，從而只對發生了變化的節點進行更新操作，
如果大家不太明白的話，我們來看個示例
<template>
<div >
<ul>
<li v-for="(item,index) in studentList" :key="item.id" @click="changeName(index)">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'ceshi',
data() {
return {
studentList: [
{id: 1, name: '張三', age: 18},
{id: 2, name: '李四', age: 19},
{id: 3, name: '王麻子', age: 20},
],
};
},
methods: {
changeName(index) {
this.studentList[index].name = '我變啦'
}
}
}
</script>
上面的修改陣列值得方式 僅在 2.2.0+ 版本中支持 Array + index 用法，
如果使用之前的則使用 Vue.set( target, propertyName/index, value )
運行后，我們打開開發者工具，然后手動修改頁面的文本，給每個后面加 “-我沒變”
然后隨便點擊其中一個，我們會發現只有點擊那個文本變了，并且只是它的文本內容變了，dom并沒有整體變，
vue中是如何實作模板轉換成視圖的
參考： 淺談Vue中的虛擬DOM
簡單來說就是：通過編譯將模版轉換成渲染函式(render)，執行渲染函式就可以得到一個以vnode節點(JavaScript物件)作為基礎的樹形結構（虛擬dom），當資料發生變化虛擬dm通過diff演算法找出新樹和舊樹的不同，記錄兩棵樹差異根據差異應用到所構建的真正的DOM樹上，視圖就更新，
diff演算法
虛擬DOM中，在DOM的狀態發生變化時，虛擬DOM會進行Diff運算，來更新只需要被替換的DOM，而不是全部重繪， 在Diff演算法中，只平層的比較前后兩棵DOM樹的節點，沒有進行深度的遍歷，
規則
同層比較,如上面div的Old Vnode，跟其Vnode比較，div只會跟同層div比較，不會跟p進行比較，下面是示例圖:
流程圖
當資料發生改變時，set方法會讓呼叫Dep.notify通知所有訂閱者Watcher，訂閱者就會呼叫patch給真實的DOM打補丁，更新相應的視圖，
具體分析
patch
來看看patch是怎么打補丁的（代碼只保留核心部分）
function patch (oldVnode, vnode) { // some code if (sameVnode(oldVnode, vnode)) { patchVnode(oldVnode, vnode) } else { const oEl = oldVnode.el // 當前oldVnode對應的真實元素節點 let parentEle = api.parentNode(oEl) // 父元素 createEle(vnode) // 根據Vnode生成新元素 if (parentEle !== null) { api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 將新元素添加進父元素 api.removeChild(parentEle, oldVnode.el) // 移除以前的舊元素節點 oldVnode = null } } // some code return vnode }
patch函式接收兩個引數oldVnode和Vnode分別代表新的節點和之前的舊節點
- 判斷兩節點是否值得比較，值得比較則執行
patchVnodefunction sameVnode (a, b) { return ( a.key === b.key && // key值 a.tag === b.tag && // 標簽名 a.isComment === b.isComment && // 是否為注釋節點 // 是否都定義了data，data包含一些具體資訊，例如onclick , style isDef(a.data) === isDef(b.data) && sameInputType(a, b) // 當標簽是<input>的時候，type必須相同 ) }
- 不值得比較則用
Vnode替換oldVnode
如果兩個節點都是一樣的，那么就深入檢查他們的子節點，如果兩個節點不一樣那就說明Vnode完全被改變了，就可以直接替換oldVnode，
雖然這兩個節點不一樣但是他們的子節點一樣怎么辦？別忘了，diff可是逐層比較的，如果第一層不一樣那么就不會繼續深入比較第二層了，（我在想這算是一個缺點嗎？相同子節點不能重復利用了...）
patchVnode
當我們確定兩個節點值得比較之后我們會對兩個節點指定patchVnode方法，那么這個方法做了什么呢？
patchVnode (oldVnode, vnode) { const el = vnode.el = oldVnode.el let i, oldCh = oldVnode.children, ch = vnode.children if (oldVnode === vnode) return if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) { api.setTextContent(el, vnode.text) }else { updateEle(el, vnode, oldVnode) if (oldCh && ch && oldCh !== ch) { updateChildren(el, oldCh, ch) }else if (ch){ createEle(vnode) //create el's children dom }else if (oldCh){ api.removeChildren(el) } } }
這個函式做了以下事情：
- 找到對應的真實dom，稱為
el - 判斷
Vnode和oldVnode是否指向同一個物件，如果是，那么直接return - 如果他們都有文本節點并且不相等，那么將
el的文本節點設定為Vnode的文本節點， - 如果
oldVnode有子節點而Vnode沒有，則洗掉el的子節點 - 如果
oldVnode沒有子節點而Vnode有，則將Vnode的子節點真實化之后添加到el - 如果兩者都有子節點，則執行
updateChildren函式比較子節點，這一步很重要
參考：詳解vue的diff演算法
updataChildren原理
參考：理解Vue 2.5的Diff演算法 作者：愛喝酸奶的吃貨出處：http://www.cnblogs.com/yingzi1028/ 本博客文章大多為原創，轉載請請在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利，轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/504472.html
標籤：其他