若依框架vue緩存
『壹』 移動端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 中的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染 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 不被調用
『叄』 vue頁面緩存，keep-alive第一次無效的解決方法
方法二：使用 include + beforeRouteLeave + vuex 與方法一相似，不同的地方在於，將需要緩存的組件保存到全局變數，可以在路由的鉤子函數里靈活的控制哪些組件需要緩存，那些不需要緩存；跟方法一相比，不需要每次再重新初始化數據，但是需要在vuex中保存數據；
1、在創建router實例的時候加上scrollBehavior方法
2、將需要緩存的組件加在include屬性里
3、在store里加入需要緩存的的組件的變數名，和相應的方法；
4、在beforeRouteLeave鉤子函數里控制需要緩存的組件
『肆』 vue 不是路由跳轉的頁面怎麼緩存
vue緩存主要四種方式:
使用vuex
存放在cookie中
存放在localStorage或者sessionStorage中
存放在路由集合中
『伍』 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可以隨便寫，不需要做什麼規律性的去寫出一個合適的正則去匹配上，就會更加靈活些
常見的應用場景可以是，列表到詳情頁，從詳情頁返回到列表頁，如果說列表頁沒有做緩存，在單頁面下，會直接返回列表首頁（存在分頁的情況），就不能直接返回至之前離開的列表頁，所以這個地方在列表頁添加頁面緩存後，可以做到返回至之前離開的列表頁
沒有緩存的時候，返回列表：
有緩存的時候，返回列表
所以從某些程度上來講，即增加了頁面的響應速度，又增加了用戶體驗，總體來說，還是比較實用的