『壹』 vue使用keep-alive緩存頁面，返回頁面時刷新部分數據
生命周期執行順序：
1、不使用keep-alive的情況：beforeRouteEnter --> created --> mounted --> destroyed
2、使用keep-alive的情況：beforeRouteEnter -->局春凱 created --> mounted --> activated --> deactivated
3、使用keep-alive，並且再次進入了緩存頁面的情況：beforeRouteEnter -->activated --> deactivated
在keep-alive頁面里的activated 監聽路由的參數變化可以實現全頁面刷新，
"$route.query.type": function name(paidrams) {
if (this.$route.path === "當前森碧的路徑") {
console.log("上次id", this.policyId, "本次id", this.$route.query.id);
if (this.policyId != this.$route.query.id||this.pageType!= this.$route.query.type) {
console.log("路由參變化");
this.getDetail();
}
桐喚}
},
$route: {
handler: function (val, oldVal) {
if (val.path === "當前的路徑") {
console.log("監聽路由變化", val, oldVal);
}
}
}
『貳』 利用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 中，這兩個鉤子函數依枝者然不會被調用！另外，在服務端渲染時，此鉤子函數也不會被調用。
『叄』 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頁面緩存（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三個頁面keepAlive、include頁面緩存問題
背景：
1、A列表頁面 --- 跳轉到 --- B填寫頁面 (B頁面不行配要緩存)。
2、A列表頁面 --- 跳轉到 --- B填檔慎指寫頁面(填寫了內容) --- 跳轉到(B頁面需要緩存) --- C選擇單位頁面再回到B頁面，要顯示 B頁面之前填寫的內容。
用vue-router中的孝隱keepAlive設置為true是不可行的。
註：：：：：以上這種方式是不行的。
可行方案：
結合keep-alive的include屬性和vuex進行緩存。
這種方式不依賴於vue-router中的keepAlive值，那怕設置為false，也可以通過上面的方式進行頁面緩存。
這樣就OK了！！！