㈠ 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頁面緩存設置，動態設置頁面緩存
情景：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
kee-alive 是 Vue 內置的一個組件， 可以使被包含的組件保留狀態，或避免重新渲染 。也就是所謂的組件緩存
keep-alive是一個抽象的組件，緩存的組件不會被mounted,為此提供activated和deactivated鉤子函數
在2.1.0 版本後keep-alive新加入了兩個屬性: include(包含的組件緩存生效) 與 exclude(排除的組件不緩存，優先順序大於include) 。
keep-alive可以接收3個屬性做為參數進行匹配對應的組件進行緩存:
include 包含的組件(可以為字元串，數組，以及正則表達式,只有匹配的組件會被緩存)
exclude 排除的組件(以為字元串，數組，以及正則表達式,任何匹配的組件都不會被緩存)
max 緩存組件的最大值(類型為字元或者數字,可以控制緩存組件的個數)
配合router使用
1.keep-alive 先匹配被包含組件的 name 欄位，如果 name 不可用，則匹配當前組件 components 配置中的注冊名稱。
2.keep-alive 不會在函數式組件中正常工作，因為它們沒有緩存實例。
3.當匹配條件同時在 include 與 exclude 存在時，以 exclude 優先順序最高(當前vue 2.4.2 version)。比如：包含於排除同時匹配到了組件A，那組件A不會被緩存。
4.包含在 keep-alive 中，但符合 exclude ，不會調用activated和 deactivated。
參考 https://juejin.cn/post/6844903918313406472
參考 https://www.imooc.com/article/302879
㈣ vue3使用 keep-alive對iframe進行緩存
使用keep-alive緩存不了iframe界面原因
【1】原理：Vue 的緩存機制並不是直接存儲 DOM 結構，而是將 DOM 節點抽象成了一個個 VNode節點。因此，Vue 的 keep-alive 緩存也是基於 VNode節點 而不是直接存儲 DOM 節點。在需要渲染的時候從Vnode渲染到真實DOM上。
【2】參數：Keep-alive 組件提供了 include 和 exclude 兩個屬性，允許組件有條件的進行緩存。
include: 字元串或正則表達式。只有匹配的組件會被緩存。
exclude: 字元串或正則表達式。任何匹配的組件都不會被緩存。
【3】Keep-alive 組件提供了兩個生命鉤子函數，分別是 activated 和 deactivated 。
activated ：當頁面存在緩存的時候執行該函數。
deactivated ：在頁面結束時觸發該方法，可清除掉滾動方法等緩存。
iframe頁里的內容並不屬於節點的信息，所以使用keep-alive依然會重新渲染iframe內的內容。而且iframe每一次渲染就相當於打開一個新的網頁窗口，即使把節點保存下來，在渲染時iframe頁還是刷新的。
不使用 keep-alive ，因為vnode原理不適用。直接把打開過得iframe中的dom保存下來。通過v-show顯示隱藏
iframeComponentsArray這個數組是打開過的iframe頁面數組
㈤ 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的理解是什麼
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實現頁面前進刷新,後退緩存
vue中,我們有時候需要實現這種場景:
1.搜索頁面到列表頁面，需要刷新重新獲取數據。
2.從詳情頁面返回列表頁面需要記住上次瀏覽的狀態。具體流程如下：
第一步:在路由配置文件中為列表頁設置meta參數，裡麵包含useCatch和keepAlive
第二步:在App文件中如下設置
第三步:在列表頁面添加leaveTag欄位,當點擊返回按鈕觸發返回事件的時候,將leaveTag修改為back,然後在beforeRouteLeave中如下:
第四步:在列表頁的actived生命周期函數中根據useCatch欄位判斷是否需要緩存:
這種處理方式會有bug,打開列表頁會有上次的殘留停頓一下,最新文章已解決,詳情請看我的最新文章。
㈧ vue頁面緩存，keep-alive第一次無效的解決方法
方法二：使用 include + beforeRouteLeave + vuex 與方法一相似，不同的地方在於，將需要緩存的組件保存到全局變數，可以在路由的鉤子函數里靈活的控制哪些組件需要緩存，那些不需要緩存；跟方法一相比，不需要每次再重新初始化數據，但是需要在vuex中保存數據；
1、在創建router實例的時候加上scrollBehavior方法
2、將需要緩存的組件加在include屬性里
3、在store里加入需要緩存的的組件的變數名，和相應的方法；
4、在beforeRouteLeave鉤子函數里控制需要緩存的組件
㈨ vue列表緩存keep-alive
列表查詢出約課記錄之後，跳轉到詳情後再返回頁面內容刷新，之前搜索的結果就沒有了，為了解決這一問題，使用了keep-alive組件來實現頁面緩存。
keep-alive
keep-alive.js源碼：
只執行一次的鉤子：當vnode.componentInstance和keepAlive為true時，不再進入$mount過程，也就不會執行mounted以及之前的鉤子函數（beforeCreated、created、mounted）
可重復執行的activated：在patch階段，最後會執行invokeInsertHook函數，這個函數調用組件實例的insert鉤子，insert鉤子中調用了activateChildComponent函數，遞歸執行子組件中的activated鉤子函數
pageList → pageDetail → pageList，pageList保存原有狀態；pageList → 其他 → pageList，pageList初始化狀態
pageList → pageDetail → pageList，pageList保存原有狀態；pageList → 其他 → pageList，pageList初始化狀態
問題：方法二中，pageList → pageDetail → 其他 → pageList，pageList採用了緩存的數據， 解決：其他頁面中的beforeRouteLeave增加 this.$store.dispatch('setCacheList', '')
㈩ 利用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 中，這兩個鉤子函數依然不會被調用！另外，在服務端渲染時，此鉤子函數也不會被調用。