keep-alive緩存優(yōu)化實踐總結
keep-alive
<keep-alive>是Vue的內置組件缕减，能在組件切換過程中將狀態(tài)保留在內存中杂彭，防止重復渲染DOM嘱能。
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例物延，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素澎怒，也不會出現(xiàn)在父組件鏈中。
具體應用場景
搜索列表頁==>詳情頁==>返回列表頁阶牍，保存上次已經(jīng)加載出來的數(shù)據(jù)和自動還原上次的瀏覽位置
keep-alive鉤子函數(shù)
?先簡單說一下和緩存相關的vue鉤子函數(shù)喷面。
?對于設置了keepAlive緩存的組件：
??第一次進入：beforeRouterEnter->created->activated->deactivated
??后續(xù)進入時：beforeRouterEnter ->activated->deactivated
可以看出，只有第一次進入該組件時走孽，才會走created鉤子惧辈，而需要緩存的組件中activated是每次都會走的鉤子函數(shù)。所以磕瓷，為了避免重復請求盒齿，我們要在activated這個鉤子里面去判斷，當前組件是需要使用緩存的數(shù)據(jù)還是重新刷新獲取數(shù)據(jù)困食。
prop:
include: 字符串或正則表達式边翁。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式硕盹。任何匹配的組件都不會被緩存符匾。
常見用法：
// 組件
export default {
name: 'test-keep-alive',
data () {
return {
includedComponents: "test-keep-alive"
}
}
}
<keep-alive include="test-keep-alive">
<!-- 將緩存name為test-keep-alive的組件 -->
<component></component>
</keep-alive>
<keep-alive include="a,b">
<!-- 將緩存name為a或者b的組件，結合動態(tài)組件使用 -->
<component :is="view"></component>
</keep-alive>
<!-- 使用正則表達式瘩例，需使用v-bind -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 動態(tài)判斷 -->
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>
<keep-alive exclude="test-keep-alive">
<!-- 將不緩存name為test-keep-alive的組件 -->
<component></component>
</keep-alive>
結合router實現(xiàn)步驟
- 保存上次已經(jīng)加載出來的數(shù)據(jù)
需要在<button>router</button>中設置router的元信息meta啊胶，（scrollTop屬性的設置為了保存瀏覽位置，后面再說）：
export const constantRouterMap =
[{
path: 'index',
name: 'list',
hidden: true,
meta: { title: '客戶管理', keepAlive: true, scrollTop: 0 },
component: () => import('@/views/List')
},
{
path: 'clientInfo',
name: 'clientInfo',
hidden: true,
component: () => import('@/views/clientInfo/index'),
meta: { title: '客戶信息', icon: 'icon-yejiguanli', keepAlive: true }
}]
export default new Router({
mode: 'history',
routes: constantRouterMap,
scrollBehavior: () => ({ y: 0 })
})
在頁面中的路由容器里設置keep-alive標簽
<template>
<keep-alive v-if="$route.meta.keepAlive">
<router-view/>
</keep-alive>
<router-view v-else-if="!$route.meta.keepAlive"/>
</template>
<script>
export default {
name: 'List'
}
</script>
- 保留頁面滾動位置
首次進入頁面時垛贤，scrollTop = 0焰坪，如上面所說，在設置keep-alive的頁面南吮，一定會走activated方法琳彩，當頁面中存在滾動條，路由跳轉的兩個場景：- 離開列表頁進入詳情頁（修改本頁面的路由元信息scrollTop為當前滾動位置）
- 離開列表頁進入其他平級頁面（修改本頁面的路由元信息scrollTop為0）
const myMixin = {
activated() {
document.querySelector('#app').scrollTop = this.$route.meta.scrollTop
},
beforeRouteLeave(to, from, next) {
if (to.name.includes('clientInfo')) {
const scrollTop = document.querySelector('#app').scrollTop
from.meta.scrollTop = scrollTop
} else {
from.meta.scrollTop = 0
}
next()
}
}
頁面中列表較多的情況下，我們把activated方法和beforeRouteLeave方法抽離出來復用露乏，頁面中引用進來即可：
import myMixin from '@/utils/mixin.js'
export default {
name: 'List',
mixins: [myMixin]
}
暫且總結這么多碧浊，希望對大家有幫助！
