這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助
一、Keep-alive 是什麼
keep-alive
是vue
中的內建元件,能在元件切換過程中將狀態保留在記憶體中,防止重複渲染DOM
keep-alive
包裹動態元件時,會快取不活動的元件例項,而不是銷燬它們
keep-alive
可以設定以下props
屬性:
-
include
- 字串或正規表示式。只有名稱匹配的元件會被快取 -
exclude
- 字串或正規表示式。任何名稱匹配的元件都不會被快取 -
max
- 數字。最多可以快取多少元件例項
關於keep-alive
的基本用法:
<keep-alive> <component :is="view"></component> </keep-alive>
使用includes
和exclude
:
<keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正規表示式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- 陣列 (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
匹配首先檢查元件自身的 name
選項,如果 name
選項不可用,則匹配它的區域性註冊名稱 (父元件 components
選項的鍵值),匿名元件不能被匹配
設定了 keep-alive 快取的元件,會多出兩個生命週期鉤子(activated
與deactivated
):
-
首次進入元件時:
beforeRouteEnter
>beforeCreate
>created
>mounted
>activated
> ... ... >beforeRouteLeave
>deactivated
-
再次進入元件時:
beforeRouteEnter
>activated
> ... ... >beforeRouteLeave
>deactivated
二、使用場景
使用原則:當我們在某些場景下不需要讓頁面重新載入時我們可以使用keepalive
舉個例子:
當我們從首頁
–>列表頁
–>商詳頁
–>再返回
,這時候列表頁應該是需要keep-alive
從首頁
–>列表頁
–>商詳頁
–>返回到列表頁(需要快取)
–>返回到首頁(需要快取)
–>再次進入列表頁(不需要快取)
,這時候可以按需來控制頁面的keep-alive
在路由中設定keepAlive
屬性判斷是否需要快取
{ path: 'list', name: 'itemList', // 列表頁 component (resolve) { require(['@/pages/item/list'], resolve) }, meta: { keepAlive: true, title: '列表頁' } }
使用<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
中內建的一個元件
原始碼位置: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() { /* 獲取預設插槽中的第一個元件節點 */ const slot = this.$slots.default const vnode = getFirstComponentChild(slot) /* 獲取該元件節點的componentOptions */ const componentOptions = vnode && vnode.componentOptions if (componentOptions) { /* 獲取該元件節點的名稱,優先獲取元件的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物件中去尋找是否有該值,如果有則表示該元件有快取,即命中快取 */ 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 /* 如果配置了max並且快取的長度超過了this.max,則從快取中刪除第一個 */ if (this.max && keys.length > parseInt(this.max)) { pruneCacheEntry(cache, keys[0], keys, this._vnode) } } vnode.data.keepAlive = true } return vnode || (slot && slot[0]) } }
可以看到該元件沒有template
,而是用了render
,在元件渲染的時候會自動執行render
函式
this.cache
是一個物件,用來儲存需要快取的元件,它將以如下形式儲存:
this.cache = { 'key1':'元件1', 'key2':'元件2', // ... }
在元件銷燬的時候執行pruneCacheEntry
函式
function pruneCacheEntry ( cache: VNodeCache, key: string, keys: Array<string>, current?: VNode ) { const cached = cache[key] /* 判斷當前沒有處於被渲染狀態的元件,將其銷燬*/ if (cached && (!current || cached.tag !== current.tag)) { cached.componentInstance.$destroy() } cache[key] = null remove(keys, key) }
在mounted
鉤子函式中觀測 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
發生了變化,即表示定義需要快取的元件的規則或者不需要快取的元件的規則發生了變化,那麼就執行pruneCache
函式,函式如下:
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) } } } }
在該函式內對this.cache
物件進行遍歷,取出每一項的name
值,用其與新的快取規則進行匹配,如果匹配不上,則表示在新的快取規則下該元件已經不需要被快取,則呼叫pruneCacheEntry
函式將其從this.cache
物件剔除即可
關於keep-alive
的最強大快取功能是在render
函式中實現
首先獲取元件的key
值:
const key = vnode.key == null? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') : vnode.key
拿到key
值後去this.cache
物件中去尋找是否有該值,如果有則表示該元件有快取,即命中快取,如下:
/* 如果命中快取,則直接從快取中拿 vnode 的元件例項 */ if (cache[key]) { vnode.componentInstance = cache[key].componentInstance /* 調整該元件key的順序,將其從原來的地方刪掉並重新放在最後一個 */ remove(keys, key) keys.push(key) }
直接從快取中拿 vnode
的元件例項,此時重新調整該元件key
的順序,將其從原來的地方刪掉並重新放在this.keys
中最後一個
this.cache
物件中沒有該key
值的情況,如下:
/* 如果沒有命中快取,則將其設定進快取 */ else { cache[key] = vnode keys.push(key) /* 如果配置了max並且快取的長度超過了this.max,則從快取中刪除第一個 */ if (this.max && keys.length > parseInt(this.max)) { pruneCacheEntry(cache, keys[0], keys, this._vnode) } }
表明該元件還沒有被快取過,則以該元件的key
為鍵,元件vnode
為值,將其存入this.cache
中,並且把key
存入this.keys
中
此時再判斷this.keys
中快取元件的數量是否超過了設定的最大快取數量值this.max
,如果超過了,則把第一個快取元件刪掉
四、思考題:快取後如何獲取資料
解決方案可以有以下兩種:
-
beforeRouteEnter
-
actived
beforeRouteEnter
每次元件渲染的時候,都會執行beforeRouteEnter
beforeRouteEnter(to, from, next){ next(vm=>{ console.log(vm) // 每次進入路由執行 vm.getData() // 獲取資料 }) },
actived
在keep-alive
快取的元件被啟用的時候,都會執行actived
鉤子
activated(){ this.getData() // 獲取資料 },
注意:伺服器端渲染期間avtived
不被呼叫
參考文獻
- https://www.cnblogs.com/dhui/p/13589401.html
- https://www.cnblogs.com/wangjiachen666/p/11497200.html
- https://vue3js.cn/docs/zh