就目前所瞭解的情況，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沒有被檢測到並實時更新，並不是子元件的問題。