一爷辙、作用
vue 【緩存】方案，保留組件狀態(tài)或避免重新渲染朦促，能夠緩存當(dāng)前頁面的所有數(shù)據(jù)
二膝晾、用法
與**【動(dòng)態(tài)組件】**一起使用：（會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們）
<keep-alive>
? <component :is="view"></component>
</keep-alive>
與**【vue-router】**一起用：
<keep-alive>
? ? <router-view></router-view>
</keep-alive>
三务冕、設(shè)置緩存條件
【include】 和 【exclude】（2.1.0新增）
逗號(hào)分隔字符串： <keep-alive include="a,b">
正則表達(dá)式 (使用 v-bind)： <keep-alive :include="/a|b/">
數(shù)組 (使用 v-bind)：<keep-alive :include="['a', 'b']">
【max】 (2.5.0新增)
數(shù)字血当。最多可以緩存多少組件實(shí)例：<keep-alive :max="10">
四、相關(guān)鉤子函數(shù)
【activated】 和 【deactivated】
在 2.2.0 及其更高版本中禀忆，activated 和 deactivated 將會(huì)在 樹內(nèi)的所有嵌套組件中觸發(fā)歹颓。
keep-alive的頁面：
第一次進(jìn)入：created-> mounted-> activated，退出：deactivated油湖。
再次進(jìn)入，觸發(fā)activated（這時(shí)我們可以拿到組件的所有data领跛，可在此節(jié)點(diǎn)做一些請(qǐng)求更新頁面數(shù)據(jù)）
五乏德、！７驼选喊括！keep-alive不生效實(shí)例
訂單頁面A（有tab標(biāo)簽），點(diǎn)擊跳轉(zhuǎn)到詳情頁面B矢棚，當(dāng)詳情頁B返回到訂單tab列表頁B時(shí)郑什，需要保持之前的tab選中狀態(tài)。
keep-alive設(shè)置
<keep-alive v-if="$route.meta.keepAlive">
? ? <router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
router設(shè)置
? {
? ? path: '/list'蒲肋，
? ? name: 'List',
? ? component: () => import('@/views/order/list'),
? ? meta: {keepAlive: true}? // 設(shè)置頁面緩存蘑拯，保持tab狀態(tài)
? ? },
? ? {
? ? path: '/detail'，
? ? name: 'Detail',
? ? component: () => import('@/views/order/detail'),
? ? meta: {keepAlive: false}? // 不需要緩存
? ? },
結(jié)果發(fā)現(xiàn)兜粘，訂單tab列表頁緩存并沒有生效Ｉ昃健！孔轴！
原因分析：
通過v-if來判斷是否生成keep-alive剃法，當(dāng)列表頁面A符合條件時(shí)，內(nèi)存緩存了組件狀態(tài)路鹰。當(dāng)跳轉(zhuǎn)到詳情頁B時(shí)贷洲，不符合條件收厨，由于v-if是掛載到keep-alive標(biāo)簽上，會(huì)把之前keep-alive的列表頁面A進(jìn)行銷毀优构，再次進(jìn)入到A會(huì)重新創(chuàng)建诵叁。
正確寫法：
寫法一：（v-if掛載到router-view上面）
<keep-alive>
? ? <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
寫法二：(使用include屬性，設(shè)置需要緩存的組件)
<keep-alive include="List">
? ? <router-view></router-view>
</keep-alive>
原文鏈接：https://blog.csdn.net/qq_36131788/article/details/107559632
