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

[[332579]]

雖然Vue不會自動更新這種情況是相對比較少，但是知道如何在出現(xiàn)這個問題時修復(fù)它還是很有用的。

在大多數(shù)情況下，此問題根源還是我們對 Vue 的響應(yīng)式理解還是不夠到位。因此，要盡量確保我們要正確使用了Vue。響應(yīng)式有時過于棘手，我也經(jīng)常不知道所措。

這節(jié)，我們就來做一些之前很少做過或者沒做過的：用 key 來讓組件重新渲染。

在這篇文章中，會涉及到這幾個知識點：

• key 是如何改變組件
• key 如何與多個子組件一起工作
• 如何強制子組件自己更新

通過改變 key 的值來重新渲染組件

我最喜歡的方法是使用key屬性，因為使用key 的方式，Vue 就知道了特定組件與特定數(shù)據(jù)相關(guān)。

如果 key保持不變，則不會更改組件。但是，如果key發(fā)生更改， Vue 知道它應(yīng)該刪除舊組件并創(chuàng)建一個新組件。

下面是一個非常基本的方法:

<template> 
  <ComponentToReRender 
    :key="componentKey" 
  /> 
</template> 
 
<script> 
  export default { 
    data() { 
      return { 
        componentKey: 0, 
      }; 
    }, 
    methods: { 
      forceRerender() { 
        this.componentKey += 1; 
      } 
    } 
  } 
</script> 

每次調(diào)用forceRerender時，componentKey 的值就會更改。當(dāng)componentKey 的值發(fā)生改變時，Vue 就知道把ComponentToReRender組件刪除并創(chuàng)建一個新組件。

這樣ComponentToReRender就會重新渲染并重置里面的狀態(tài)。nice nice!

強制多個子節(jié)點進行更新

同樣用這種方式也可以用于多個子組件：

<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組件會被渲染。第二個被忽略，因為它具有重復(fù)的key 了。

為了解決這個問題，我們可以基于componentKey為每個孩子構(gòu)造一個新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始終是唯一的，現(xiàn)在這兩個組件都將被重新渲染。

如果是在列表中，則可以使用如下方式：

<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構(gòu)造為${componentKey}-${index}，因此列表中的每個項目都會獲得唯一的key，只要componentKey一改變，列表中的所有組件將同時重新渲染。

當(dāng)然，還有更簡單的方式，就是用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

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。