VUE實現頁面快取的解決方案 keep alive

2021-10-04 20:40:00 字數 956 閱讀 9503

(三) 注意事項

(一)背景

在實際開發中,對於spa類的單頁面應用,乙個頁面就是乙個元件的概念,預設情況下,在我們開啟乙個新頁面的時候,為了記憶體的不浪費,不會快取上乙個頁面,但是一些時候我們的pm會給我們提一些需求,比如:

1.列表頁面,我進行過濾之後跳轉,返回還能看到過濾的內容

2.列表頁面,我滾動道某乙個位置,跳轉頁面回來之後,滾動位置不變

(二)實現頁面快取的方案

2.1 整個頁面的資料和狀態進行快取

這個沒啥說的,就是基本的頁面的所有資料和狀態均進行快取,在使用者返回回來之後,在created或者mounted中進行資料現場的恢復,放到這個位置來講,當然是不推薦的,因為快取頁面的資料和狀態不僅僅是資料量大的問題,還有一些狀態需要考慮,整體來說就是坑一大堆。

2.2 vue的keep-alive來實現

keep-alive傳送門

從文件裡可以看出,keep-alive能改實現元件的快取,但是文件中並沒有提到怎麼實現乙個頁面的快取,但是在上面我們提到單頁面開發中,每個頁面都可以看做是乙個單獨的元件,所以也是可以實現快取的。方案如下:

2.2.1 配置keep-alive

為了便於大家理解,這裡的include就不用變數了,需要注意的是,include的值是乙個陣列,意味著他可以配置很多項,配置項的每乙個值就是這個元件的名字

2.2.1 配置元件

上面提到include中的值是元件的name屬性,因為這裡是router-view,很多人認為是router中配置的name,其實並不是,而是指的在建立元件是命的名。

(三) 注意事項

Ajax獲取頁面被快取的解決方案

ajax頁面引數相同時只返回快取的內容的解決辦法 常利用ajax寫一些頁面無重新整理的內容獲取頁面,這種方式很快捷也很方便,但其中有乙個問題,就是如果兩次提交的引數相同時,返回的內容只返回上次獲取的內容,如果我們在第一次修改了引數,第二次再次呼叫卻會發現頁面根本沒有改變。這樣的情況是是為ajax獲取...

vue 刪除頁面快取 Vue實現頁面快取

在 使用vue開發時,當進行頁面之間的切換時,上乙個頁面將會被銷毀。但是當我們想節省效能以及保留使用者上次操作的結果或避免ajax重複請求的時候,需要把某些特定的頁面快取下來。在vue中,提供了內建元件keep alive 包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們。和相似,是乙個抽象元...

Redis快取解決方案

使用快取業務流程大概 查詢時,先查快取 有,直接返回 無,查資料庫返回。接下來說一下快取在實際應用中可能出現的問題 快取穿透 由於快取是不命中時被動寫入的,出於容錯考慮,當查詢乙個一定不存在的資料時 儲存層查不到資料不寫入快取 導致每次查詢這個不存在的資料的請求都會直接到儲存層查詢,失去了快取的意義...