Vue中Keep-Alive緩存組件使用語(yǔ)法及原理深度解析
一、Keep-alive 是什么
keep-alive是vue中的內(nèi)置組件，能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM
keep-alive 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們
keep-alive可以設(shè)置以下props屬性：
- include - 字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存
- exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存
- max - 數(shù)字。最多可以緩存多少組件實(shí)例
關(guān)于keep-alive的基本用法：
<keep-alive> <component :is="view"></component> </keep-alive>
使用includes和exclude：
<keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正則表達(dá)式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 數(shù)組 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
匹配首先檢查組件自身的 name 選項(xiàng)，如果 name 選項(xiàng)不可用，則匹配它的局部注冊(cè)名稱 (父組件 components 選項(xiàng)的鍵值)，匿名組件不能被匹配
設(shè)置了 keep-alive 緩存的組件，會(huì)多出兩個(gè)生命周期鉤子（activated與deactivated）：
- 首次進(jìn)入組件時(shí)：beforeRouteEnter > beforeCreate > created> mounted > activated > ... ... > beforeRouteLeave > deactivated
- 再次進(jìn)入組件時(shí)：beforeRouteEnter >activated > ... ... > beforeRouteLeave > deactivated
二、使用場(chǎng)景
使用原則：當(dāng)我們?cè)谀承﹫?chǎng)景下不需要讓頁(yè)面重新加載時(shí)我們可以使用keepalive
舉個(gè)栗子:
當(dāng)我們從首頁(yè)–>列表頁(yè)–>商詳頁(yè)–>再返回，這時(shí)候列表頁(yè)應(yīng)該是需要keep-alive
從首頁(yè)–>列表頁(yè)–>商詳頁(yè)–>返回到列表頁(yè)(需要緩存)–>返回到首頁(yè)(需要緩存)–>再次進(jìn)入列表頁(yè)(不需要緩存)，這時(shí)候可以按需來(lái)控制頁(yè)面的keep-alive
在路由中設(shè)置keepAlive屬性判斷是否需要緩存
{
path: 'list',
name: 'itemList', // 列表頁(yè)
component (resolve) {
require(['@/pages/item/list'], resolve)
},
meta: {
keepAlive: true,
title: '列表頁(yè)'
}
}使用<keep-alive>
<div id="app" class='wrapper'>
<keep-alive>
<!-- 需要緩存的視圖組件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要緩存的視圖組件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>三、原理分析
keep-alive是vue中內(nèi)置的一個(gè)組件
源碼位置：src/core/components/keep-alive.js
export default {
name: 'keep-alive',
abstract: true,
props: {
include: [String, RegExp, Array],
exclude: [String, RegExp, Array],
max: [String, Number]
},
created () {
this.cache = Object.create(null)
this.keys = []
},
destroyed () {
for (const key in this.cache) {
pruneCacheEntry(this.cache, key, this.keys)
}
},
mounted () {
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
},
render() {
/* 獲取默認(rèn)插槽中的第一個(gè)組件節(jié)點(diǎn) */
const slot = this.$slots.default
const vnode = getFirstComponentChild(slot)
/* 獲取該組件節(jié)點(diǎn)的componentOptions */
const componentOptions = vnode && vnode.componentOptions
if (componentOptions) {
/* 獲取該組件節(jié)點(diǎn)的名稱，優(yōu)先獲取組件的name字段，如果name不存在則獲取組件的tag */
const name = getComponentName(componentOptions)
const { include, exclude } = this
/* 如果name不在inlcude中或者存在于exlude中則表示不緩存，直接返回vnode */
if (
(include && (!name || !matches(include, name))) ||
// excluded
(exclude && name && matches(exclude, name))
) {
return vnode
}
const { cache, keys } = this
/* 獲取組件的key值 */
const key = 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
/* 拿到key值后去this.cache對(duì)象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存 */
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
// make current key freshest
remove(keys, key)
keys.push(key)
}
/* 如果沒(méi)有命中緩存，則將其設(shè)置進(jìn)緩存 */
else {
cache[key] = vnode
keys.push(key)
// prune oldest entry
/* 如果配置了max并且緩存的長(zhǎng)度超過(guò)了this.max，則從緩存中刪除第一個(gè) */
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true
}
return vnode || (slot && slot[0])
}
}可以看到該組件沒(méi)有template，而是用了render，在組件渲染的時(shí)候會(huì)自動(dòng)執(zhí)行render函數(shù)
this.cache是一個(gè)對(duì)象，用來(lái)存儲(chǔ)需要緩存的組件，它將以如下形式存儲(chǔ)：
this.cache = {
'key1':'組件1',
'key2':'組件2',
// ...
}在組件銷毀的時(shí)候執(zhí)行pruneCacheEntry函數(shù)
function pruneCacheEntry (
cache: VNodeCache,
key: string,
keys: Array<string>,
current?: VNode
) {
const cached = cache[key]
/* 判斷當(dāng)前沒(méi)有處于被渲染狀態(tài)的組件，將其銷毀*/
if (cached && (!current || cached.tag !== current.tag)) {
cached.componentInstance.$destroy()
}
cache[key] = null
remove(keys, key)
}在mounted鉤子函數(shù)中觀測(cè) include 和 exclude 的變化，如下：
mounted () {
this.$watch('include', val => {
pruneCache(this, name => matches(val, name))
})
this.$watch('exclude', val => {
pruneCache(this, name => !matches(val, name))
})
}如果include 或exclude 發(fā)生了變化，即表示定義需要緩存的組件的規(guī)則或者不需要緩存的組件的規(guī)則發(fā)生了變化，那么就執(zhí)行pruneCache函數(shù)，函數(shù)如下：
function pruneCache (keepAliveInstance, filter) {
const { cache, keys, _vnode } = keepAliveInstance
for (const key in cache) {
const cachedNode = cache[key]
if (cachedNode) {
const name = getComponentName(cachedNode.componentOptions)
if (name && !filter(name)) {
pruneCacheEntry(cache, key, keys, _vnode)
}
}
}
}在該函數(shù)內(nèi)對(duì)this.cache對(duì)象進(jìn)行遍歷，取出每一項(xiàng)的name值，用其與新的緩存規(guī)則進(jìn)行匹配，如果匹配不上，則表示在新的緩存規(guī)則下該組件已經(jīng)不需要被緩存，則調(diào)用pruneCacheEntry函數(shù)將其從this.cache對(duì)象剔除即可
關(guān)于keep-alive的最強(qiáng)大緩存功能是在render函數(shù)中實(shí)現(xiàn)
首先獲取組件的key值：
const key = vnode.key == null?
componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key拿到key值后去this.cache對(duì)象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存，如下：
/* 如果命中緩存，則直接從緩存中拿 vnode 的組件實(shí)例 */
if (cache[key]) {
vnode.componentInstance = cache[key].componentInstance
/* 調(diào)整該組件key的順序，將其從原來(lái)的地方刪掉并重新放在最后一個(gè) */
remove(keys, key)
keys.push(key)
} 直接從緩存中拿 vnode 的組件實(shí)例，此時(shí)重新調(diào)整該組件key的順序，將其從原來(lái)的地方刪掉并重新放在this.keys中最后一個(gè)
this.cache對(duì)象中沒(méi)有該key值的情況，如下：
/* 如果沒(méi)有命中緩存，則將其設(shè)置進(jìn)緩存 */
else {
cache[key] = vnode
keys.push(key)
/* 如果配置了max并且緩存的長(zhǎng)度超過(guò)了this.max，則從緩存中刪除第一個(gè) */
if (this.max && keys.length > parseInt(this.max)) {
pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}表明該組件還沒(méi)有被緩存過(guò)，則以該組件的key為鍵，組件vnode為值，將其存入this.cache中，并且把key存入this.keys中
此時(shí)再判斷this.keys中緩存組件的數(shù)量是否超過(guò)了設(shè)置的最大緩存數(shù)量值this.max，如果超過(guò)了，則把第一個(gè)緩存組件刪掉
四、緩存后如何獲取數(shù)據(jù)
解決方案可以有以下兩種：
beforeRouteEnter
actived
actived
beforeRouteEnter
每次組件渲染的時(shí)候，都會(huì)執(zhí)行beforeRouteEnter
beforeRouteEnter(to, from, next){
next(vm=>{
console.log(vm)
// 每次進(jìn)入路由執(zhí)行
vm.getData() // 獲取數(shù)據(jù)
})
},actived
在keep-alive緩存的組件被激活的時(shí)候，都會(huì)執(zhí)行actived鉤子
activated(){
this.getData() // 獲取數(shù)據(jù)
},注意：服務(wù)器端渲染期間avtived不被調(diào)用
到此這篇關(guān)于Vue中Keep-Alive緩存組件使用語(yǔ)法及原理解析的文章就介紹到這了,更多相關(guān)vue Keep-Alive緩存組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue3除了keep-alive還有哪些實(shí)現(xiàn)頁(yè)面緩存詳解
- React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的示例代碼
- Vue路由組件的緩存keep-alive和include屬性的具體使用
- Vue keep-alive組件的使用及如何清除緩存
- vue3?keep-alive實(shí)現(xiàn)tab頁(yè)面緩存功能
- Vue3嵌套路由中使用keep-alive緩存多層的實(shí)現(xiàn)
- vue使用keep-alive進(jìn)行組件緩存方法詳解(組件不緩存問(wèn)題解決)
- vue中keep-alive組件實(shí)現(xiàn)多級(jí)嵌套路由的緩存
- 快速解決 keep-alive 緩存組件中定時(shí)器干擾問(wèn)題
相關(guān)文章
本文主要介紹了Vue?3.0中的setup函數(shù),包括其概述、使用場(chǎng)景和具體用法,通過(guò)本文的介紹,我們可以看到,setup函數(shù)是用來(lái)將組件的狀態(tài)和行為進(jìn)行分離的一個(gè)重要工具,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要為大家介紹了Vue 2源碼解讀$mount原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue.js中動(dòng)態(tài)更改svg的相關(guān)屬性詳解
這篇文章主要為大家介紹了Vue.js中動(dòng)態(tài)更改svg的相關(guān)屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目完整步驟
最近做項(xiàng)目結(jié)構(gòu)優(yōu)化,前端項(xiàng)目都是部署在nginx上,想實(shí)現(xiàn)同一個(gè)端口可以訪問(wèn)多個(gè)前端項(xiàng)目,所以就有了本文,這篇文章主要給大家介紹了關(guān)于Nginx同一端口部署多個(gè)前后端分離的vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2023-10-10
基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了如何基于Vue2實(shí)現(xiàn)數(shù)字縱向滾動(dòng)效果,從而達(dá)到顯示計(jì)時(shí)器滾動(dòng)效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue實(shí)現(xiàn)pdf在線預(yù)覽功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)pdf在線預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,眾所周知echarts是非常強(qiáng)大的插件,所以這篇文章主要給大家介紹了關(guān)于vue+echarts圖表使用的相關(guān)資料,需要的朋友可以參考下2021-09-09
Vue Element校驗(yàn)validate的實(shí)例
這篇文章主要介紹了Vue Element校驗(yàn)validate的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vuejs實(shí)現(xiàn)遞歸樹(shù)型菜單組件
本篇文章主要介紹了vuejs實(shí)現(xiàn)遞歸樹(shù)型菜單組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
Vuex modules模式下mapState/mapMutations的操作實(shí)例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10