日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
很多人不知道可以使用這種Key的方式來對Vue組件進行重新渲染！

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

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

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

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

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

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

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

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

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

下面是一個非?；镜姆椒?

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

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

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

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

這里我們使用了兩個單獨 key 來分別控制每個子組件是否重新渲染。將它們分開是為了其中的一個子組件渲染，不會影響到另外另一個。

但如果希望兩個子組件總是一起更新，則可以使用相同的 kye。但是，key必須是唯一的，所以下面這種方式，不能工作：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

在這里，僅第一個Child組件會被渲染。第二個被忽略，因為它具有重復的key 了。

為了解決這個問題，我們可以基于componentKey為每個孩子構造一個新key：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

因為我們每次在componentKey后面添加-1和-2，所以這兩個key始終是唯一的，現(xiàn)在這兩個組件都將被重新渲染。

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

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

在這里，我們將key構造為${componentKey}-${index}，因此列表中的每個項目都會獲得唯一的key，只要componentKey一改變，列表中的所有組件將同時重新渲染。

當然，還有更簡單的方式，就是用div把列表包裹起來，直接對 div重新更新就行了：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.  
    4.

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

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

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

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

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


分享文章：很多人不知道可以使用這種Key的方式來對Vue組件進行重新渲染！
路徑分享：http://www.dlmjj.cn/article/coooeph.html