Ⅰ vue 路由緩存
在寫一個移動端項目時遇到了一個問題，每一個tab欄所對應的頁面被封裝成一個組件進行
復用，結果會導致他們共用一個滾動條。解決辦法是給這個子組件加固定的高度（例如
height:100vh），同時加一個屬性overflow-y:auto，這樣就可以解決這個問題。之後發現每當進
入主頁中任意一篇文章再退出時，頁面重新載入渲染了，之前的文章消失了，所有在這里想到
了路由緩存。
先說一下keep-alive的屬性和用法。
Props ：
用法 ：
<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中。
當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。
（只有被<keep-alive>包裹的組件才具有這兩個鉤子函數）
其實不太建議使用include的，因為如果多個組件中都包括include中匹配到的組件，想單獨
的讓其中某個組件緩存是不太方便的。所以可以在分發路由時，在需要緩存的路由中把額外標
記的屬性寫在meta中，如圖1。
使用的時候可以在根組件中通過$route.meta.keepAlive取到該值，然後進行v-if判斷即可，如圖
2，這樣使用起來相對靈活一點。
使用keep-alive緩存路由後，已經解決了主要問題，但是有新的問題出現。緩存過的組件重
新被激活時不會記錄滾動條的狀態，默認置頂，所以應該監聽這個被復用的組件的onscroll事
件，動態記錄滾動條的位置狀態，然後重新賦值給scrollTop（如果還想優化最好給滾動事件來
一個防抖處理）。那麼問題來了，應該在何時重新賦值呢？上面用法中提到了當組件在<keep-
alive> 內被切換時會觸發activated這個鉤子函數，所以應在這里賦值。
Ⅱ 移動端Vue界面緩存處理
大家可以看到當重新進入列表頁數據進行了刷新這明顯不符合需求
查網路問同事知道了一個東西叫keep-alive於是決定使用這個內置組件試試.
然後吧發現問題確實能夠得到結局但是出了個新問題如圖:
問題1:界面雖然被緩存但是當退出到前一個頁面再進入的時候界面還是被緩存狀態,我覺得這是不合理的.
問題2:被緩存的界面從上個頁面再次進入時動畫效果不對.
基於這兩個問題我也查了一些資料和博客,也總結了第二套方案
這個rank是用來判斷當前組件所在的級別.
比如A組件->B組件 ->C組件,那麼A的rank為1,B的rank為2,C的rank為3,
在beforeRouteLeave中
這個貌似能解決問題,但是!!!
問題1: 這個返回動畫就是不對...(圖片在瀏覽器可能看不出啥問題,在真機很明顯)因為這個框架是前端給的動畫我也不會弄...如果能解決跳轉動畫問題,我覺得這個方案基本可以符合要求..如果有大佬可以解決,方便的話指導下小弟.而且能解決這個動畫問題後面也不用看了...
問題二:有的時候會出現緩存了上一次的bug(也不知道咋回事...出現的還挺頻繁..).
在這里就是我自己總結的一個方案..雖然能完美解決這些問題不過對開發不友好,維護成本太高..不建議使用(如果實在沒辦法的話)
首先在vuex中定義需要緩存的界面的數據(先測試的滑動,所以分開寫的可以只寫一個data)
先說下高度的滑動吧這個滑動的高度也是需要保存的.界面中沃使用cube-ui的scroll組件
給data增加一個scrollHeight屬性緩存界面高度.還有需要緩存的數據model
當界面滑動停止調用scrollend方法對scrollHeight進行賦值
每次進入界面即在created 函數中取出緩存的高度,如果有高度那麼讓它自動滑動.並重新給scrollHeight進行賦值.
這邊是我封裝的一個js..實現是這樣的
這樣就可以保證滑動的緩存(data與高度類似).
這是data的js
當界面進行跳轉對組件的rank進行判斷如下:
而在進入的時候
Ⅲ Vue keep-alive本地路由緩存和圖片懶載入
keep-alive用來緩存組件,避免了每次點擊其他頁面都要載入,減少性能消耗和提高用戶體驗，下圖緩存整個路由視圖(所有頁面)，也可以緩存單個組件
圖片懶載入用了 vue-lazyload 組件，npm安裝：npm i vue-lazyload -S
我是全局引用的，所以在main.js里引用 vue-lazyload
之後在需要懶載入的圖片上把src換成v-lazy
效果如圖
當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次，俗稱占點陣圖），只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶載入，因為很多頁面，內容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性載入完畢。估計大家都會等到黃花變成黃花菜了。當用戶網速慢時，可以先顯示一張loading的動態圖，預先讓用戶有心理准備，否則打開後一片空白會使得用戶體驗變差。
Ⅳ 在Vue中如何緩存頁面
在Vue中經常會遇到需要緩存頁面的情況，如果不對Vue進行處理，那麼Vue默認是不會緩存頁面的。例如從菜譜列表界面進入到菜譜的詳情頁後，再從菜譜詳情頁中返回到菜譜列表頁面中時，菜譜列表是不需要進行刷新的，一個是增加了不必要的網路請求，第二個是如推薦菜譜後台是實時推薦的，每次請求的數據都不一定一樣的，這樣在用戶退出後甚至找不到之前的進入位置，造成了很不好的用戶體驗。類似的情況還有很多，那麼如何在Vue中控制頁面是否刷新呢？
設置方法
注意：以上兩種方法都可以對路由是否緩存進行設置，如果不論何種情況下都要緩存頁面，可以直接採用第一種方法，當然第二種情況同樣可以滿足情況；但是如果需要區分從不同頁面跳轉的情況來確定是否需要緩存的話，就需要用到第二種方法。
Ⅳ Vue組件傳值及頁面緩存問題
關於父組件的傳值類型和props更多的定義詳見官網 ： vue官網
（2）子組件向父組件傳值
（3）通過 chlidren等方法調取用層級關系的組件內的數據和方法。
有很多時候根據業務需求要在同級組件或頁面間傳值，此處提供以下幾種方法作為參考:
（1）通過router-link進行跳轉
（2） this.$router.push()
此方法同樣是有path+query和name+params兩種方式：
總結：使用query，傳輸的值會在url後面以參數的形式顯示出來，可以刷新頁面，數據不變，但會是頁面路由過長；而params只要一刷新傳遞的參數就沒了。
（3）LocalStorage緩存傳值
注意：簡單的小項目可以這么做，如果項目很大，建議直接用vuex。
（4）通過Vuex進行傳值
（5）發布訂閱模式（也叫eventBus或事件匯流排）
在Vue的原型上定義一個變數eventBus，所有所有Vue的實例或組件都將共享這個eventBus，可以用eventBus來發布自定義事件，然後在組件中用eventBus訂閱自定義事件。就可以實現傳值。
詳細講解可看 鏈接
（6）Vue.observable
index.vue組件中觸發：
Vue中如何在切換組件過程中，將狀態保存到內存中，防止DOM重新渲染，通俗的講就是實現如何在一個頁面輸入部分數據後到了另一個頁面再返回該頁面，數據還在。
需求分析：Page1中錄入信息，頁面跳轉帶Page2，然後再返回Page1，之前Page1錄入的信息還存在。
現在更改需求為：
首頁是A頁面
A頁面跳轉到B，B頁面不需要緩存
B頁面跳轉到C，C頁面不需要被緩存
C頁面返回到B，B頁面需要緩存
B頁面返回到A，
A再次跳轉到B
（1）此時思路是在每個路由的beforeRouteLeave(to, from, next)鉤子中設置to.meta.keepAlive
beforeRouteLeave講解
PageA頁面：
PageB頁面：
（2）用eventBus解決此問題
需要注意的一點是發布訂閱第一次會無效，因為訂閱的組件還沒創建。解決方法就是首次進入pageB頁面時接收pageA頁面params里傳遞的參數。
Ⅵ Vue 怎麼緩存當前的組件緩存後怎麼更新說說你對keep-alive的理解是什麼
keep-alive 是 vue 中的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染 DOM
keep-alive 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們
keep-alive 可以設置以下 props 屬性：
關於 keep-alive 的基本用法：
使用 includes 和 exclude ：
匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)，匿名組件不能被匹配
設置了 keep-alive 緩存的組件，會多出兩個生命周期鉤子（ activated 與 deactivated ）：
使用原則：當我們在某些場景下不需要讓頁面重新載入時我們可以使用 keepalive
舉個栗子:
當我們從 首頁 –> 列表頁 –> 商詳頁 –> 再返回 ，這時候列表頁應該是需要 keep-alive
從 首頁 –> 列表頁 –> 商詳頁 –> 返回到列表頁(需要緩存) –> 返回到首頁(需要緩存) –> 再次進入列表頁(不需要緩存) ，這時候可以按需來控制頁面的 keep-alive
在路由中設置 keepAlive 屬性判斷是否需要緩存
使用 <keep-alive>
keep-alive 是 vue 中內置的一個組件
源碼位置：src/core/components/keep-alive.js
可以看到該組件沒有 template ，而是用了 render ，在組件渲染的時候會自動執行 render 函數
this.cache 是一個對象，用來存儲需要緩存的組件，它將以如下形式存儲：
在組件銷毀的時候執行 pruneCacheEntry 函數
在 mounted 鉤子函數中觀測 include 和 exclude 的變化，如下：
如果 include 或 exclude 發生了變化，即表示定義需要緩存的組件的規則或者不需要緩存的組件的規則發生了變化，那麼就執行 pruneCache 函數，函數如下：
在該函數內對 this.cache 對象進行遍歷，取出每一項的 name 值，用其與新的緩存規則進行匹配，如果匹配不上，則表示在新的緩存規則下該組件已經不需要被緩存，則調用 pruneCacheEntry 函數將其從 this.cache 對象剔除即可
關於 keep-alive 的最強大緩存功能是在 render 函數中實現
首先獲取組件的 key 值：
拿到 key 值後去 this.cache 對象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存，如下：
直接從緩存中拿 vnode 的組件實例，此時重新調整該組件 key 的順序，將其從原來的地方刪掉並重新放在 this.keys 中最後一個
this.cache 對象中沒有該 key 值的情況，如下：
表明該組件還沒有被緩存過，則以該組件的 key 為鍵，組件 vnode 為值，將其存入 this.cache 中，並且把 key 存入 this.keys 中
此時再判斷 this.keys 中緩存組件的數量是否超過了設置的最大緩存數量值 this.max ，如果超過了，則把第一個緩存組件刪掉
解決方案可以有以下兩種：
每次組件渲染的時候，都會執行 beforeRouteEnter
在 keep-alive 緩存的組件被激活的時候，都會執行 actived 鉤子
注意：伺服器端渲染期間 avtived 不被調用
Ⅶ 如何解決h5、vue、uniapp等項目緩存問題
我們再開發web項目時，經常會遇到修改了css、js、html等靜態文件，並部署到伺服器之後。使用瀏覽器進行訪問的時候，發現並沒有什麼變化，這就是靜態緩存。我們應該如何處理靜態緩存呢？首先我們先了解什麼是靜態緩存。
html文件添加Expires時間
CDN是靜態緩存加速最典型的代表。CDN技術並不是一門新的技術，它是基於傳統 nginx、squid、varnish 等 web 緩存技術，結合 DNS 智能解析的靜態緩存加速技術。
方式二：
uniapp解決緩存的方式與vue一樣，但是uniapp兼容了很多平台，所以修改vue.config.js又不太一樣。如果uniapp根目錄下面沒有vue.config.js，則新建vue.config.js文件即可。
Ⅷ vue頁面緩存設置，動態設置頁面緩存
情景：A頁面—>B頁面—>C頁面，A頁面去B頁面期望B頁面不緩存，B頁面去C頁面時，期望B頁面可以被緩存。（實際場景可以是：A為首頁，B為列表頁，C為詳情頁，B滾動翻頁後，從C返回B，記錄滾動位置。）
通過路由訪問鉤子設置B頁面的keepAlive為true或者false。
離開路由後，判斷to.name是否是A的路由名，是的話設置為false,否則設置為true。注意B頁面的keepAlive要設置為true。
2.通過vuex結合路由的includes功能以及路由鉤子函數實現。（推薦，實現起來優雅）
3.聲明一個初始化頁面狀態，內部變數的函數，從a 頁面進入執行初始化函數，其餘情況不執行。視圖依賴數據驅動，所以可以實現效果。