㈠ 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組件傳值及頁面緩存問題
關於父組件的傳值類型和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中如何緩存頁面
在Vue中經常會遇到需要緩存頁面的情況，如果不對Vue進行處理，那麼Vue默認是不會緩存頁面的。例如從菜譜列表界面進入到菜譜的詳情頁後，再從菜譜詳情頁中返回到菜譜列表頁面中時，菜譜列表是不需要進行刷新的，一個是增加了不必要的網路請求，第二個是如推薦菜譜後台是實時推薦的，每次請求的數據都不一定一樣的，這樣在用戶退出後甚至找不到之前的進入位置，造成了很不好的用戶體驗。類似的情況還有很多，那麼如何在Vue中控制頁面是否刷新呢？
設置方法
注意：以上兩種方法都可以對路由是否緩存進行設置，如果不論何種情況下都要緩存頁面，可以直接採用第一種方法，當然第二種情況同樣可以滿足情況；但是如果需要區分從不同頁面跳轉的情況來確定是否需要緩存的話，就需要用到第二種方法。
㈣ vue使用keep-alive實現頁面前進刷新,後退緩存
vue中,我們有時候需要實現這種場景:
1.搜索頁面到列表頁面，需要刷新重新獲取數據。
2.從詳情頁面返回列表頁面需要記住上次瀏覽的狀態。具體流程如下：
第一步:在路由配置文件中為列表頁設置meta參數，裡麵包含useCatch和keepAlive
第二步:在App文件中如下設置
第三步:在列表頁面添加leaveTag欄位,當點擊返回按鈕觸發返回事件的時候,將leaveTag修改為back,然後在beforeRouteLeave中如下:
第四步:在列表頁的actived生命周期函數中根據useCatch欄位判斷是否需要緩存:
這種處理方式會有bug,打開列表頁會有上次的殘留停頓一下,最新文章已解決,詳情請看我的最新文章。
㈤ 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中keep-alive，快速實現頁面緩存
有時候我們不希望組件被重新渲染影響使用體驗；或者處於性能考慮，避免多次重復渲染降低性能。而是希望組件可以緩存下來,維持當前的狀態。這時候就可以用到keep-alive組件。
緩存所有頁面
根據條件緩存頁面
1.在 router 目錄下的 index.js 文件里
1. activated
在 keep-alive 組件激活時調用
該鉤子函數在伺服器端渲染期間不被調用
2. deactivated
在 keep-alive 組件停用時調用
該鉤子在伺服器端渲染期間不被調用
被包含在 keep-alive 中創建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated
使用 keep-alive 會將數據保留在內存中，如果要在每次進入頁面的時候獲取最新的數據，需要在 activated 階段獲取數據，承擔原來 created 鉤子函數中獲取數據的任務。
注意： 只有組件被 keep-alive 包裹時，這兩個生命周期函數才會被調用，如果作為正常組件使用，是不會被調用的，以及在 2.1.0 版本之後，使用 exclude 排除之後，就算被包裹在 keep-alive 中，這兩個鉤子函數依然不會被調用！另外，在服務端渲染時，此鉤子函數也不會被調用。
㈦ 如何解決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 路由緩存
在寫一個移動端項目時遇到了一個問題，每一個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 項目緩存問題
最直接的方案是：Ctrl+Shift+Delete 清緩存，世界瞬間安靜了，但是用戶是上帝，再說誰沒事會去清緩存。
網上常見的解決方案：
vue項目中緩存問題
解決Vue入口文件index.html緩存問題
vue項目如何讓客戶端（緩存）自動更新？
自己項目中解決方法：
暫時是這樣解決。
㈩ vue 不是路由跳轉的頁面怎麼緩存
vue緩存主要四種方式:
使用vuex
存放在cookie中
存放在localStorage或者sessionStorage中
存放在路由集合中