頁面緩存後端數據

場景

1.重複使用的子組件，在初始化時須要從後端請求固定的數據。例如省市縣列表的下拉框，只須要第一個子組件加載時請求一次，在頁面加一個緩存，以後使用緩存的數據便可，不須要每次都去請求後端。

2.使用v-if條件渲染的組件，在爲true時加載一遍，若是有頻繁的切換操做，會頻繁的請求後端(有頻繁切換的不建議使用v-if)

 

v-show & v-if

v-show也是根據條件展現元素的指令。帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。

v-show 不支持 <template> 語法，也不支持 v-else。

二者之間的區別：

v-if :

1.是真正的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

2.是惰性的，只有當條件爲true時纔會渲染，若是條件爲false則什麼都不作

3.有很高的切換開銷，適用於條件不太容易改變的時候

v-show:

1.無論條件是true仍是false都會進行渲染。而且只是簡單地基於 CSS 進行切換

2.有很高的初始渲染開銷，適用於很是頻繁地切換

lru-cache

緩存不生效的狀況：

1.刷新頁面

2.新開頁

安裝插件：npm install lru-cache

cacheUtil.js

 

未使用緩存的狀況：

使用緩存的狀況：

參考連接：

https://ssr.vuejs.org/zh/guide/caching.html#%E7%BB%84%E4%BB%B6%E7%BA%A7%E5%88%AB%E7%BC%93%E5%AD%98-component-level-caching

https://www.jianshu.com/p/e7843dc350ae

https://blog.csdn.net/itKingOne/article/details/81136589

 

HTML5的本地存儲

localStorage和sessionStorage，localStorage只要不手動清除，會一直在

 

刷新當前頁面，或者經過location.href、window.open、或者經過帶target="_blank"的a標籤打開新標籤，以前的sessionStorage還在，可是若是你是主動打開一個新窗口或者新標籤，sessionStorage是空的。

也就是說，sessionStorage的session僅限當前標籤頁或者當前標籤頁打開的新標籤頁，經過其它方式新開的窗口或標籤不認爲是同一個session。

經過帶target="_blank"的A標籤、window.open等方式打開新窗口時，會把舊窗口（或標籤）的sessionStorage數據帶過去，但今後以後，新窗口（或標籤）的sessionStorage的增刪改和舊窗口已經沒有關係了，若是隻是在當前標籤內跳轉新頁面（或者刷新），數據還會保留（前提固然是同域）。

總之，在處理sessionStorage時，只要打開新窗口就要特別注意了，新舊窗口數據不會互相同步。

 

參考連接：

http://blog.haoji.me/aboute-session-storage.html

https://www.cnblogs.com/cencenyue/p/7604651.html