一、切換組件案例

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

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

• 方式一：通過v-if來判斷，顯示不同的組件；
  

• 方式二：動態(tài)組件的方式；
  動態(tài)組件是使用 component 組件，通過一個特殊的attribute is 來實現(xiàn)：

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

• 可以是通過component函數(shù)注冊的組件；
• 在一個組件對象的components對象中注冊的組件；
  

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

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

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

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

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

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

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

• 答案是否定的；
• 這是因為默認(rèn)情況下，我們在切換組件后，about組件會被銷毀掉，再次回來時會重新創(chuàng)建組件；

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

四、keep-alive屬性

keep-alive有一些屬性：

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

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

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

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

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

五、緩存組件的生命周期

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

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

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

總結(jié)

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

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