一、切換組件案例

比如我們現(xiàn)在想要實(shí)現(xiàn)了一個(gè)功能：

• 點(diǎn)擊一個(gè)tab-bar，切換不同的組件顯示；
  
  這個(gè)案例我們可以通過(guò)兩種不同的實(shí)現(xiàn)思路來(lái)實(shí)現(xiàn)：

• 方式一：通過(guò)v-if來(lái)判斷，顯示不同的組件；
  

• 方式二：動(dòng)態(tài)組件的方式；
  動(dòng)態(tài)組件是使用 component 組件，通過(guò)一個(gè)特殊的attribute is 來(lái)實(shí)現(xiàn)：

這個(gè)currentTab的值需要是什么內(nèi)容呢？

• 可以是通過(guò)component函數(shù)注冊(cè)的組件；
• 在一個(gè)組件對(duì)象的components對(duì)象中注冊(cè)的組件；
  

二、動(dòng)態(tài)組件的傳值

如果是動(dòng)態(tài)組件我們可以給它們傳值和監(jiān)聽(tīng)事件嗎？

• 也是一樣的；
• 只是我們需要將屬性和監(jiān)聽(tīng)事件放到component上來(lái)使用；
  

三、認(rèn)識(shí)keep-alive

我們先對(duì)之前的案例中About組件進(jìn)行改造：

• 在其中增加了一個(gè)按鈕，點(diǎn)擊可以遞增的功能；
  

比如我們將counter點(diǎn)到10，那么在切換到home再切換回來(lái)about時(shí)，狀態(tài)是否可以保持呢？

• 答案是否定的；
• 這是因?yàn)槟J(rèn)情況下，我們?cè)谇袚Q組件后，about組件會(huì)被銷毀掉，再次回來(lái)時(shí)會(huì)重新創(chuàng)建組件；

但是，在開(kāi)發(fā)中某些情況我們希望繼續(xù)保持組件的狀態(tài)，而不是銷毀掉，這個(gè)時(shí)候我們就可以使用一個(gè)內(nèi)置組件：keep-alive。

四、keep-alive屬性

keep-alive有一些屬性：

• include - string | RegExp | Array。只有名稱匹配的組件會(huì)被緩
  存；
  

• exclude - string | RegExp | Array。任何名稱匹配的組件都不
  會(huì)被緩存；

• max - number | string。最多可以緩存多少組件實(shí)例，一旦達(dá)
  到這個(gè)數(shù)字，那么緩存組件中最近沒(méi)有被訪問(wèn)的實(shí)例會(huì)被銷毀；

include 和 exclude prop 允許組件有條件地緩存：

• 二者都可以用逗號(hào)分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來(lái)表示；
• 匹配首先檢查組件自身的 name 選項(xiàng)；
  

五、緩存組件的生命周期

對(duì)于緩存的組件來(lái)說(shuō)，再次進(jìn)入時(shí)，我們是不會(huì)執(zhí)行created或者mounted等生命周期函數(shù)的：

• 但是有時(shí)候我們確實(shí)希望監(jiān)聽(tīng)到何時(shí)重新進(jìn)入到了組件，何時(shí)離開(kāi)了組件；
• 這個(gè)時(shí)候我們可以使用activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)來(lái)監(jiān)聽(tīng)；
  

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Vue动态组件和组件缓存的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。