Ⅰ 移動端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頁面緩存（keepAlive）
同人博客搬遷~~~~（播客主頁： https://www.cnblogs.com/epines/ ）
頁面緩存在頁面中長期會使用到，可以更快速的在頁面切換期間的資源獲取
主要是用keep-alive實現
在vue項目中，相關的寫法比較多，還有一些注意點需要仔細
第一種方式
在App.vue中
添加標簽
<keep-alive>
<router-view />
</keep-alive>
這會就是所有的頁面都會被緩存
這里做了兩個頁面的相互跳轉，分別寫了一個輸入框，在輸入內容後，跳轉時，輸入的內容因為緩存的原因會被保留
如果存在某些頁面需要緩存，那麼可以通過keep-alive的屬性去處理
其中就是include和exclude
include：名稱匹配的組件才會被緩存，其中可以寫字元串或正則表達式
exclude：名稱匹配的組件不會被緩存，其中同樣是字元串或正則表達式
這里的名稱是指組件的名稱
<script>
export default {
name: 'HelloWorld'
}
</script>
第二種方式：
在路由中進行設置通過添加meta，route/index.js
export default new Router({
routes: [{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
keepAlive: true // 該路由會被緩存
}
},
{
path: '/ss',
name: 'ss',
component: Ss,
meta: { keepAlive:false // 該路由不會被緩存，不需要緩存的時候該屬性可以不用寫 }
}]
})
這時候頁面還需要通過該屬性進行判斷是否緩存
在App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
</router-view>
這樣寫有個優點就是，需要緩存不需要緩存的name可以隨便寫，不需要做什麼規律性的去寫出一個合適的正則去匹配上，就會更加靈活些
常見的應用場景可以是，列表到詳情頁，從詳情頁返回到列表頁，如果說列表頁沒有做緩存，在單頁面下，會直接返回列表首頁（存在分頁的情況），就不能直接返回至之前離開的列表頁，所以這個地方在列表頁添加頁面緩存後，可以做到返回至之前離開的列表頁
沒有緩存的時候，返回列表：
有緩存的時候，返回列表
所以從某些程度上來講，即增加了頁面的響應速度，又增加了用戶體驗，總體來說，還是比較實用的
Ⅲ 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項目中怎麼緩存圖片，可以使用<keep-alive></keep-alive>緩存圖片嗎，輪播圖中怎麼用
緩存圖片是瀏覽器默認做的事情，你不需要任何操作。你不需要緩存的時候才需要添加一些信息。<keep-alive></keep-alive>是用來緩存路由的，緩存下來的路由再次進入和上次離開時的狀態是一樣的(不會再次觸發created鉤子)。
Ⅳ 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 頁面進入執行初始化函數，其餘情況不執行。視圖依賴數據驅動，所以可以實現效果。
Ⅵ 在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里傳遞的參數。