怎么使用Key對Vue組件進行重新渲染

這篇文章主要介紹“怎么使用Key對Vue組件進行重新渲染”，在日常操作中，相信很多人在怎么使用Key對Vue組件進行重新渲染問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用Key對Vue組件進行重新渲染”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

通過改變 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>

到此，關于“怎么使用Key對Vue組件進行重新渲染”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！