溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“vue內置組件keep-alive怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue內置組件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(to, from, next){
next(vm=>{
console.log(vm)
// 每次進入路由執行
vm.getData() // 獲取數據
})
},
在keep-alive緩存的組件被激活的時候，都會執行actived鉤子
activated(){
this.getData() // 獲取數據
},
注意：服務器端渲染期間avtived不被調用
感謝各位的閱讀，以上就是“vue內置組件keep-alive怎么使用”的內容了，經過本文的學習后，相信大家對vue內置組件keep-alive怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
