一、介紹

先來看一個問題？

從首頁的區(qū)塊鏈模塊切換到文章詳情頁面，再從文章詳情頁面回到首頁，我們發(fā)現(xiàn)首頁重新渲染原來的狀態(tài)沒有了，又回到了推薦模塊。

首先，這是正常的狀態(tài)，并非問題，路由在切換的時候會銷毀切出去的頁面組件，然后渲染匹配到的頁面組件。

但是我想要某些頁面保持狀態(tài)，而不會隨著路由切換導(dǎo)致重新渲染。

二、解決方案

使用 keep-alive 緩存組件

官方文檔：在動態(tài)組件上使用 keep-alive

主要用于保留組件狀態(tài)或避免重新渲染，當(dāng)它包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。

（1）組件緩存不是持久化，它只是在應(yīng)用運行期間不會重新渲染，如果頁面刷新還是會回到初始狀態(tài)。

（2） 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。

（3） 要求被切換到的組件都有自己的名字，不論是通過組件的 name 選項還是局部/全局注冊。

（4）組件生命周期鉤子和緩存

（5）include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達(dá)式或一個數(shù)組來表示。

<!-- 逗號分隔字符串 --> <keep-alive include="a,b"><component :is="view"></component> </keep-alive><!-- 正則表達(dá)式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"><component :is="view"></component> </keep-alive><!-- 數(shù)組 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"><component :is="view"></component> </keep-alive>

匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

三、項目中的緩存配置

參考鏈接：

https://juejin.im/post/5d22f0f3f265da1b94216d0b

問題描述：

我們希望

登錄成功后，就把緩存給清除掉，讓組件重新進(jìn)行渲染。

等頁面渲染完成后，再給頁面加上緩存（keep-alive）

實現(xiàn)思路：給keep-alive 的include屬性綁定一個動態(tài)的數(shù)組，因為keep-alive只會緩存include數(shù)組中的組件

首頁在Vuex容器中定義這個動態(tài)數(shù)組cachePages：

然后，在用戶登錄成功之后，清除layout組件的緩存：


這樣就解決了上面提到的，用戶1登錄后退出登錄，使用用戶2的賬號登錄時，”我的“頁面的個人信息展示的還是用戶1的個人信息的問題。

但是此時，layout組件沒有緩存，當(dāng)?shù)卿浀挠脩魪膮^(qū)塊鏈頻道點擊 某篇文章 -> 進(jìn)入文章詳情頁面后，再返回到首頁時，首頁會重新進(jìn)行渲染，無法回到之前用戶所在的區(qū)塊鏈頻道，而是直接變成首頁渲染成功后默認(rèn)顯示的推薦頻道。

為了解決這個問題：我們可以在layout組件的渲染完成之后，給它加上緩存。

解決緩存帶來的列表滾動位置問題：

就是列表滾動的位置沒有緩存下來，也就是用戶在首頁的 區(qū)塊鏈模塊的文章列表滾動了一段距離后，進(jìn)去文章詳情頁面，再返回到首頁時，頁面確實還在區(qū)塊鏈模塊，但是列表滾動的位置又回到了列表頂部。

layout切換到文章詳情頁面，觸發(fā)activated生命鉤子:

文章詳情頁面切換到layout，觸發(fā)deactivated生命鉤子:

總結(jié)

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

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