如何理解vue中的key？

就目前所了解的情況，key的作用有以下這些。

• v-for遍歷時，用id，uuid之類作為key，唯一標識節點加速虛擬DOM渲染
• 響應式系統沒有監聽到的數據，用+new Date()生成的時間戳作為key，手動強制觸發重新渲染

場景一大同小異司空見慣，場景二是下面這樣的：

<div :key="rerender"> <span>Hello vue.js !</span> <complexComponent :propObj="propObj" :propArr="propArr" ></complexComponent> </div> refresh(){ this.rerender = + new Date(); }

那么vue中key的相關知識點到底是怎樣的呢？

• 官方API知識點
• 上面2個使用場景背后的原理是什么？
• 除key外，還有其它強制更新DOM的方法嗎？
• 參考資料

 

官方API知識點

• 在Vue.js中，key是6個特殊屬性key, ref, is, slot, slot-scope, scope其中之一。
• key的值可以是number，也可以是string。
• key主要作用於Vue的virtual DOM算法，在diff new nodes list和old nodes list時，作為識別VNode的一個線索。
• 如果不用key，Vue會用一種算法：最小化element的移動，並且會嘗試盡最大程度在同適當的地方對相同類型的element，做patch或者reuse。
• 如果使用了key，Vue會根據keys的順序記錄element，曾經擁有了key的element如果不再出現的話，會被直接remove或者destoryed。
• 擁有同一個parent的children必須有unique keys。重復的key的導致render error。

最常用的用法一：v-for

<ul> <li v-for="item in items" :key="item.id">...</li> </ul>

最常用的用法二：強制替換element或者component

• 觸發組件的lifecycle
• 觸發transition

<transition> <span :key="text">{{ text }}</span> </transition>

text發生變化時，<span>會被replaced，而不會patched，因此transition會被觸發。
我的理解：
text變化時，span的key發生了變化，也就是說曾經擁有了舊key的span不再出現了，當擁有新值的text作為key時，擁有了新key的span出現了，那么舊key span會被移除，舊transition也會移除，新key span觸發渲染，新transition觸發。

 

上面2個使用場景背后的原理是什么？

結合官方API的知識點，現在再來回顧文章開頭提出的場景。

場景一：v-for遍歷時，用id，uuid之類作為key，唯一標識節點加速虛擬DOM渲染

答案：

• 如果不用key，Vue會用一種算法：最小化element的移動，並且會嘗試盡最大程度在同適當的地方對相同類型的element，做patch或者reuse。
• 如果使用了key，Vue會根據keys的順序記錄element，曾經擁有了key的element如果不再出現的話，會被直接remove或者destoryed。

場景二：響應式系統沒有監聽到的數據，用+new Date()生成的時間戳作為key，手動強制觸發重新渲染

<div :key="rerender"> <span>Hello Vue.js !</span> <complexComponent :propObj="propObj" :propArr="propArr" ></complexComponent> </div> refresh(){ this.rerender = + new Date(); }

答案：

• 如果使用了key，Vue會根據keys的順序記錄element，曾經擁有了key的element如果不再出現的話，會被直接remove或者destoryed。
• refresh方法調用后，包含了span和complexComponent的div的key發生了變化，也就是說曾經擁有了舊key的div不再出現了，當擁有新值的rerender作為key時，擁有了新key的div出現了，那么舊key div會被移除，舊span和complexComponent也會移除，新key div觸發渲染，新span，帶着父組件新propObj和propArr的新complexComponent渲染。

思考：

1. 為什么要叫propObj和propArr？
2. 帶着父組件新propObj和propArr的新complexComponent渲染。 為什么要加粗？

由於Vue.js的obj和arr存在無法檢測到數據變化的情況，obj是屬性的新增和刪除（原因是新增和刪除都沒有觸發setter，watcher未告訴外界更新），arr則是數組內元素重新賦值或者修改length屬性（原因是沒有使用改變數組本身的方法，沒有觸發數組原型鏈攔截器，watcher未告訴外界更新）。
所以！通過賦予新key的方式，移除舊key div，渲染新key div，propObj和propArr在complexComponent組件內會重新觸發一次生命周期，做一次重新渲染。此時父組件的propObj和propArr js變量其實已經獲取到新值了，只是沒有觸發DOM也好，VNode也好的重新渲染。需要通過刷新key去force update，說到forceUpdate，可以通過$forceUpdate()去手動強制更新DOM。

PPT模板下載大全https://www.wode007.com

除key外，還有其它強制更新DOM的方法嗎？

場景：父組件修改傳遞給子組件的數據，數組數據的更新沒有按照this.$set去更新。該怎么辦？

this.productImages.forEach((product) => { if (product.productId in this.productsState) { product.status = this.productsState[product.productId]; } });

不使用this.$set去賦值數據的不能rerender的原因是什么？
在Vue.js中，對Array的變化偵測是通過攔截原型的方式實現的。也就通過對push，pop，shift，unshift，splice，sort，reverse，fill，copyWithin去改變數組自身內容的方法做攔截，從而響應。而product.status = this.productsState[product.productId];沒有觸發任何改變數組自身的被監聽的方法，因此不會rerender。

• 刷新組件的key
• $forceUpdate方法

刷新組件的key

1.這個key加在什么地方比較好？

加在this.productImages的父元素上就好。
若不涉及數據傳遞，也可以直接加在需要更新的element上。

2.用什么做key值？

現在是粗暴的+new Date()時間戳做key值的。
也可以用雙向綁定的值作為key值，保證新舊key值不同就行。

3.key的原理是什么？

vue.js的虛擬DOM算法，在更新vNode時，需要從舊vNode列表中查找與新vNode節點相同的vNode進行更新，如果這個過程設置了屬性key，過程就會快很多。
其他具體見上文。

$forceUpdate方法

只能在父組件調用這個方法，手動通知vue實例重新渲染。

// $forceUpdate源碼 Vue.prototype.$forceUpdate = function () { const vm: Component = this if (vm._watcher) { vm._watcher.update() } } // update源碼 /** * Subscriber interface. * Will be called when a dependency changes. */ update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) } }

1.$forceUpdate可以更新的原理分析

product.status = this.productsState[product.productId];以后，其實此時dep已經發生變化了，但是Vue.js數組響應式的實現由於是攔截原型鏈方法的方式，沒有檢測到這個變化，所以不會自動rerender，沒有觸發update。因此我們通過$forceUpdate的方式，調用包含dep的watcher上的update方法，從而做到rerender。

2.可以在子組件監聽事件，父組件發送事件然后只刷新子組件嗎？

不可以。
因為dep是父組件的watcher和dep，並不是子組件，是父組件的this.productImages沒有被檢測到並實時更新，並不是子組件的問題。