Vue中keep-alive的使用我總結(jié)的有兩種方式應(yīng)用：

首先簡(jiǎn)述一下keep-alive的作用，kee-alive可以緩存不活動(dòng)的的組件。當(dāng)組件之間進(jìn)行相互切換的時(shí)候，默認(rèn)會(huì)銷毀，當(dāng)重新切換回來(lái)時(shí)又重新初始化。現(xiàn)在有需求切換回來(lái)不銷毀組件，保持原來(lái)的狀態(tài)，此時(shí)用keep-alive就可以實(shí)現(xiàn)了

我創(chuàng)建了兩個(gè)組件，可以相互切換

組件1：

組件2：

第一種方式

在組件1的路由中添加 meta: { keepAlive: true }, 也就是當(dāng)前路由需要緩存

此時(shí)路由設(shè)置完畢，keep-alive代碼可以結(jié)合v-if進(jìn)行包裹，如果meta中的keepAlive為true進(jìn)行緩存，否側(cè)不進(jìn)行緩存，這樣可以更靈活一些。

此時(shí)組件被緩存，不會(huì)銷毀，所以切換不會(huì)重新創(chuàng)建，自然也不會(huì)調(diào)用create等生命周期函數(shù)。不過(guò)我們可以用activated與deactivated來(lái)獲取當(dāng)前組件是否處于活動(dòng)狀態(tài)（類似鉤子函數(shù)的用法）。

第二種方式

在keep-alive上有兩個(gè)屬性：

通過(guò)include設(shè)置

此時(shí)，也可以達(dá)到緩存keepAlive組件的目的。

以上是我初步總結(jié)的keep-alive的實(shí)現(xiàn)用法，不正之處煩請(qǐng)諸位指正。

到此這篇關(guān)于Vue中keep-alive的兩種應(yīng)用方式的文章就介紹到這了,更多相關(guān)Vue keep-alive內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！