在某些情況下，我們必須強制Vue重新渲染組件，如果沒有，那可能，你做的業務還不夠負責，反正我是經常需要重新渲染組件，哈哈。
雖然Vue不會自動更新這種情況是相對比較少，但是知道如何在出現這個問題時修復它還是很有用的。
在大多數情況下，此問題根源還是我們對 Vue 的響應式理解還是不夠到位。 因此，要盡量確保我們要正確使用了Vue。 響應式有時過於棘手，我也經常不知道所措。
這節，我們就來做一些之前很少做過或者沒做過的：用 key 來讓組件重新渲染。
在這篇文章中，會涉及到這幾個知識點：
- key 是如何改變組件
- key 如何與多個子組件一起工作
- 如何強制子組件自己更新
通過改變 key 的值來重新渲染組件
我最喜歡的方法是使用key屬性，因為使用key 的方式，Vue 就知道了特定組件與特定數據相關。
如果 key保持不變，則不會更改組件。 但是，如果key發生更改， Vue 知道它應該刪除舊組件並創建一個新組件。
下面是一個非常基本的方法:
<template>
<ComponentToReRender
:key="componentKey" /> </template> <script> export default { data() { return { componentKey: 0, }; }, methods: { forceRerender() { this.componentKey += 1; } } } </script> 復制代碼每次調用forceRerender時，componentKey 的值就會更改。 當componentKey 的值發生改變時，Vue 就知道把ComponentToReRender組件刪除並創建一個新組件。
這樣ComponentToReRender就會重新渲染並重置里面的狀態。nice nice!
強制多個子節點進行更新
同樣用這種方式也可以用於多個子組件：
<template>
<div>
<Child
:key="key1" /> <Child :key="key2" /> </div> </template> <script> export default { data() { return { key1: 0, key2: 0, }; }, methods: { forceRerender(child) { if (child === 1) { this.key1 += 1; } else if( child === 2) { this.key2 += 1; } } } } </script> 復制代碼這里我們使用了兩個單獨 key 來分別控制每個子組件是否重新渲染。將它們分開是為了其中的一個子組件渲染，不會影響到另外另一個。
但如果希望兩個子組件總是一起更新，則可以使用相同的 kye。但是，key必須是唯一的，所以下面這種方式，不能工作：
<template>
<div>
<Child
:key="componentKey" /> <Child :key="componentKey" /> </div> </template> <script> export default { data() { return { componentKey: 0, }; }, methods: { forceRerender(child) { this.componentKey += 1; } } } </script> 復制代碼在這里，僅第一個Child組件會被渲染。 第二個被忽略，因為它具有重復的key 了。
大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。
為了解決這個問題，我們可以基於componentKey為每個孩子構造一個新key：
<template>
<div>
<Child
:key="`${componentKey}-1`" /> <Child :key="`${componentKey}-2`" /> </div> </template> <script> export default { data() { return { componentKey: 0, }; }, methods: { forceRerender(child) { this.componentKey += 1; } } } </script> 復制代碼因為我們每次在componentKey后面添加-1和-2，所以這兩個key始終是唯一的，現在這兩個組件都將被重新渲染。
如果是在列表中，則可以使用如下方式：
<template>
<div>
<Child
v-for="(item, index) in list" :key="`${componentKey}-${index}`" /> </div> </template> <script> export default { data() { return { list: [ // ... ], componentKey: 0, }; }, methods: { forceRerender(child) { this.componentKey += 1; } } } </script> 復制代碼在這里，我們將key構造為${componentKey}-${index}，因此列表中的每個項目都會獲得唯一的key，只要componentKey一改變，列表中的所有組件將同時重新渲染。
當然，還有更簡單的方式，就是用div把列表包裹起來，直接對 div重新更新就行了：
<template>
<div :key="componentKey"> <Child v-for="item in list" :key="item.id" /> </div> </template> <script> export default { data() { return { list: [ // ... ], componentKey: 0, }; }, methods: { forceRerender(child) { this.componentKey += 1; } } } </script>