在某些情況下，我們必須強制Vue重新渲染組件，如果沒有，那可能，你做的業務還不夠負責，反正我是經常需要重新渲染組件，哈哈。

[[332579]]

雖然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> 

這中思路可以用在很多地方，可以為我們擺脫很的困境，大家要牢記起來。

好了，今天就跟大家分享到這里，我們下期在見，謝謝大家的觀看。

作者：Michael Thiessen 譯者：前端小智 來源：medium

原文：https://morioh.com/p/08963bf07353

本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯系大遷世界公眾號。