如何管理Vue中的緩存頁面
<keep-alive> <router-view /> </keep-alive>
Vue中內(nèi)置的<keep-alive>組件可以幫助我們在開發(fā)SPA應(yīng)用時(shí),通過把全部路由頁面進(jìn)行緩存(當(dāng)然也可以有針對性的緩存部分頁面),顯著提高頁面二次訪問速度,但是也給我們在某些場景帶來了困擾,其中包含兩個(gè)主要矛盾:
- 緩存頁面如何在合適的時(shí)機(jī)被銷毀 (keep-alive組件提供了三個(gè)參數(shù)來動態(tài)配置緩存狀態(tài),但是作用有限,后面分析)
- 同一個(gè)路徑如何緩存多個(gè)不同的頁面(同頁不同參),比如淘寶商品頁面繼續(xù)跳轉(zhuǎn)另一個(gè)商品頁面
本文主要圍繞這兩個(gè)問題探討,后文用問題一和問題二指代。
本文默認(rèn)所有頁面都是keep-alive
問題一 銷毀
當(dāng)隨著業(yè)務(wù)邏輯變得復(fù)雜,路由棧也逐漸升高,理論上用戶可以無限的路由下去,不可避免的我們需要管理這些緩存在內(nèi)存中的頁面數(shù)據(jù),頁面數(shù)據(jù)包含兩部分,Vue實(shí)例和對應(yīng)的Vnode。查看 Vue 源碼中src/core/components/keep-alive.js關(guān)于緩存的定義
this.cache = Object.create(null) //用來緩存vnode cache[key] => Vnode this.keys = [] //用來記錄已緩存的vnode的key
緩存后并不會重用 Vnode,而是只用它上面掛載的 Vue 實(shí)例。
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance //僅從緩存的vnode中獲取vue實(shí)例掛在到新的vnode上
// make current key freshest
remove(keys, key)
keys.push(key)
}
為什么不用呢,因?yàn)橛蠦UG,最早一版實(shí)現(xiàn)里確實(shí)是會直接使用緩存的 Vnode。
出自src/core/components/keep-alive.js init version
export default {
created () {
this.cache = Object.create(null)
},
render () {
const childNode = this.$slots.default[0]
const cid = childNode.componentOptions.Ctor.cid
if (this.cache[cid]) {
const child = childNode.child = this.cache[cid].child //直接獲取緩存的vnode
childNode.elm = this.$el = child.$el
} else {
this.cache[cid] = childNode
}
childNode.data.keepAlive = true
return childNode
},
beforeDestroy () {
for (const key in this.cache) {
this.cache[key].child.$destroy()
}
}
}
我們需要管理的其實(shí)就是cache和keys,keep-alive提供了三個(gè)參數(shù)來動態(tài)管理緩存:
include - 只有名稱匹配的組件會被緩存。 exclude - 任何名稱匹配的組件都不會被緩存。 max - 最多可以緩存多少組件實(shí)例。
它們的作用非常簡單,源碼寫的也很簡單易讀:
所以當(dāng)我們想要管理這些緩存時(shí),簡單的方案就是操作這三個(gè)參數(shù),修改include和exclude來緩存或者清除某些緩存,但是需要注意的是它們匹配的是組件的name:
出自src/core/components/keep-alive.js
const name: ?string = getComponentName(componentOptions)
所以清除緩存是會無差別的把某個(gè)組件的所有實(shí)例全部清除,這顯然不滿足我們的需求。
max的邏輯則是超過最大值時(shí)清除棧底的緩存,
出自src/core/components/keep-alive.js:
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
我們要解決問題一,官方提供給的API走不通,我們只能自己來了,我們需要的是解決兩個(gè)子問題:
- 什么時(shí)候銷毀
- 怎么銷毀
1. 怎么銷毀
先看怎么銷毀,如果想銷毀一個(gè)實(shí)例很簡單,可以直接用 this.$destroy(), 這樣可以嗎,不行,這樣緩存cache和keys中依舊保留了原來的vnode和key,再次訪問時(shí)就會出現(xiàn)問題,vnode一直被留存,但是它身上的實(shí)例已經(jīng)被銷毀了,這時(shí)候在vue的update過程中就會再去創(chuàng)建一個(gè)vue實(shí)例,也就是說只要某個(gè)keep-alive的頁面調(diào)用過一次this.$destroy(),但是沒有清理緩存數(shù)組,這個(gè)頁面之后被重新渲染時(shí)就一定會重新創(chuàng)建一個(gè)實(shí)例,當(dāng)然重新走全部的生命周期?,F(xiàn)象最終就是這個(gè)頁面就像是沒有被緩存一樣。
this.$destroy(); //不適合keep-alive組件
所以銷毀需要同時(shí)清理掉緩存cache和keys,下面定義了一個(gè)同時(shí)清除緩存的$keepAliveDestroy方法:
const dtmp = Vue.prototype.$destroy;
const f = function() {
if (this.$vnode && this.$vnode.data.keepAlive) {
if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
if (this.$vnode.componentOptions) {
var key = !isDef(this.$vnode.key)
? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
: this.$vnode.key;
var cache = this.$vnode.parent.componentInstance.cache;
var keys = this.$vnode.parent.componentInstance.keys;
if (cache[key]) {
if (keys.length) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
dtmp.apply(this, arguments);
}
Vue.prototype.$keepAliveDestroy = f;
2. 什么時(shí)候銷毀
那么什么時(shí)候銷毀呢,有兩個(gè)觸發(fā)時(shí)機(jī):
- replace時(shí),頁面A --replace--> 頁面B (清除頁面A)
- route back時(shí) ,頁面A --push--> 頁面B --back--> 頁面A (清除頁面B)
replace 比較簡單,我們可以直接攔截router的replace方法,在該方法中清除掉當(dāng)前頁面。(這里也有例外,比如切換Tab時(shí),最后再說)
我們具體來看看route back這種情況,如果說我們的頁面上有一個(gè)返回鍵,那么在這里清除緩存是非常正確的時(shí)機(jī),但是我們不能忽略瀏覽器自帶的返回鍵和安卓機(jī)上的物理返回鍵,這種情況考慮進(jìn)來以后,僅使用返回鍵的方案就不能滿足了。
2.1 方案一 使用route.query 記錄當(dāng)前頁面棧深度
每次push或者replace是都增加query上一個(gè)參數(shù),來記錄當(dāng)前深度
this.$router.push({
path:"/targer",
query:{
stackLevel:Number(this.$route.query.stackLevel) + 1
}
})
這個(gè)方案有明顯弊端,外部暴露一個(gè)參數(shù)是非常丑陋且危險(xiǎn)的,用戶可以隨便修改,在進(jìn)行網(wǎng)頁推廣時(shí),業(yè)務(wù)去生產(chǎn)環(huán)境自己拷貝到的推廣鏈接也可能帶著一個(gè)奇怪的 https://xxx.com/foo?bar=123&stackLevel=13后綴。棄用
2.2 方案二 使用Vue實(shí)例自身記錄當(dāng)前棧深度
hack掉router的push和replace方法以后,每次跳轉(zhuǎn)的時(shí)候都可以給目標(biāo)頁的vm掛載一個(gè)_stackLevel,這樣就解決了方案一的問題,不暴露給用戶,URL中不可見,也無法修改,但是我們不能忽視瀏覽器中另一個(gè)惡魔——刷新鍵,在刷新的時(shí)候URL不會變,但是vm實(shí)例就需要重新創(chuàng)建了,那么我們的棧深度標(biāo)示也就丟失了。棄用
2.3 方案三 使用history.state記錄棧深度
那么最終就是既可以對用戶不可見,又可以在刷新的時(shí)候得以保存。那就是history.state了,所以我們需要做的就是把stack深度保存到history.state中,它能夠完整的保存整個(gè)路由鏈條。
當(dāng)我們獲取到目標(biāo)頁面棧深度小于當(dāng)前頁面時(shí),我們就可以銷毀當(dāng)前頁面了。
if(target.stack < current.stack){
current.$keepAliveDestroy();
}
問題二 同頁不同參緩存多個(gè)實(shí)例
可以在源碼中看到 src/core/components/keep-alive.js
const key: ?string = vnode.key == null
// same constructor may get registered as different local components
// so cid alone is not enough (#3269)
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
// make current key freshest
remove(keys, key)
keys.push(key)
} else {
cache[key] = vnode
keys.push(key)
// prune oldest entry
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
一個(gè)vnode如果沒有key才會使用組件名,所以默認(rèn)緩存中的key是組件名,如果組件相同時(shí),我們在每個(gè)頁面都有自己的key就可以解決這個(gè)問題了,如何實(shí)現(xiàn)每個(gè)頁面擁有自己的key呢。有兩個(gè)子問題:
- 如何做到唯一
- 如何把key賦值給頁面的vnode
1. 如何做到唯一
1.1 時(shí)間戳、超大隨機(jī)數(shù)
key = Date.now()
1.2 路由棧高度+路徑名
key = vm._stack + router.currentRoute.path 這個(gè)方案利用當(dāng)前的棧高度+路徑名,為什么需要路徑名呢,因?yàn)閞eplace的時(shí)候棧高度不變,只是路徑名變了。
2. 如何把key賦值給頁面的vnode
目前有兩個(gè)方案給vue-router當(dāng)前的Vnode的key來賦值:
2.1 通過route.query動態(tài)綁定Key
這個(gè)方案實(shí)現(xiàn)比較簡單
//綁定key
...
<router-view :key='$route.query.routerKey' />
...
//push時(shí)
this.$router.push({
path:"/foo",
query:{
routerKey: Date.now() //隨機(jī)key
}
})
這種方式用起來非常簡單有效,但是缺點(diǎn)同樣也是會暴露一個(gè)奇怪的參數(shù)在URL中
2.2 通過獲取到Vnode直接賦值
在哪個(gè)階段給Vnode的key賦值呢,答案顯而易見,在keep-alive組件render函數(shù)進(jìn)入前, src/core/components/keep-alive.js
...
render () {
const slot = this.$slots.default
const vnode: VNode = getFirstComponentChild(slot)
...
我們可以hack掉keep-alive的render函數(shù),然后在這之前先把slot里的第一個(gè)子節(jié)點(diǎn)拿到以后,給它的key進(jìn)行賦值,然后再調(diào)用 keep-alive的render:
const tmp = vm.$options.render //vm is keep-alive component instance
vm.$options.render = function() {
const slot = this.$slots.default;
const vnode = getFirstComponentChild(slot) // vnode is a keep-alive-component-vnode
if (historyShouldChange) {
if (!isDef(vnode.key)) {
if (isReplace) {
vnode.key = genKey(router._stack)
} else if (isPush()) {
vnode.key = genKey(Number(router._stack) + 1)
} else {
vnode.key = genKey(Number(router._stack) - 1)
}
}
} else {
// when historyShouldChange is false should rerender only, should not create new vm ,use the same vnode.key issue#7
vnode.key = genKey(router._stack)
}
return tmp.apply(this, arguments)
}
總結(jié)
通過以上對于問題的分析,我們就解決了自動管理緩存的核心難題。本文是對開源庫 vue-router-keep-alive-helper 的一次總結(jié),此庫是款簡單易用的keep-alive緩存自動化管理工具,從此告別Vue緩存管理難題。如果對你有用,感謝慷慨Star。
演示Demo Sample Code
Bilibili演示視頻 感謝三連。
以上就是如何管理Vue中的緩存頁面的詳細(xì)內(nèi)容,更多關(guān)于vue 緩存頁面的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue項(xiàng)目使用高德地圖時(shí)報(bào)錯:AMap?is?not?defined解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用高德地圖時(shí)報(bào)錯:AMap?is?not?defined的解決辦法,"AMap is not defined"是一個(gè)錯誤提示,意思是在代碼中沒有找到定義的AMap,需要的朋友可以參考下2023-12-12
vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue實(shí)現(xiàn)商品列表的添加刪除實(shí)例講解,有興趣的朋友們可以參考下。2020-05-05

