vue中的keep-alive用法指南
什么是keep-alive？
keep-alive是Vue的一個內(nèi)置抽象組件，通常用于緩存動態(tài)組件或路由組件。被keep-alive包裹的組件在切換時不會被銷毀，而是被緩存下來，下一次切換回這個組件時，會直接復用之前的實例，保持其狀態(tài)。
<template>
<keep-alive>
<component :is="view"></component>
</keep-alive>
</template>
<script>
export default {
data() {
return {
view: 'homeComponent'
};
}
};
</script>在這個例子中， homeComponent在被切換時不會被銷毀，而是被緩存，當再次展示時，狀態(tài)和數(shù)據(jù)都保持不變。
keep-alive重要的配置選項
1.include和exclude：用于控制哪些組件需要緩存，支持字符串、正則表達式或數(shù)組。
<keep-alive include="ComponentA, ComponentB" exclude="ComponentC"> <router-view></router-view> </keep-alive>
2.max：用于指定緩存的組件數(shù)量，當超出這個數(shù)量時，最久未使用的組件實例將被銷毀。
<keep-alive :max="6"> <router-view></router-view> </keep-alive>
生命周期鉤子
keep-alive還引入了兩個新的組件生命周期鉤子，用于處理緩存組件：
- activated：當組件被激活時觸發(fā)（即從緩存中恢復時）
- deactivated：當組件被停用時觸發(fā)（即被緩存時）
export default {
activated() {
console.log('組件被激活了');
},
deactivated() {
console.log('組件被緩存了');
}
};適用場景
- 多頁簽（Tab）切換：在復雜的表單或多步操作場景中，用戶頻繁切換頁面，如果使用keep-alive，切換回來的頁面能保留之前輸入的數(shù)據(jù)或操作狀態(tài)。
- 路由緩存：在Vue項目中，常常會在路由切換時希望保持組件的狀態(tài)，如商品詳情頁、搜索頁面等。
keep-alive的核心原理
- 緩存實例：當組件被第一次加載時，keep-alive會將組件的實例緩存起來。
- 組件復用：當你切換到一個已經(jīng)被緩存的組件時，keep-alive會從緩存中提取該組件的實例，而不是重新創(chuàng)建。
- 生命周期管理：為了處理組件的激活和停用，keep-alive引入了activated和deactivated鉤子，在組件進入或離開緩存時觸發(fā)。
核心原理：
- 緩存實例：當組件被第一次加載時，keep-alive會將組件的實例緩存起來。
- 組件復用：當你切換到一個已經(jīng)被緩存的組件時，keep-alive會從緩存中提取該組件的實例，而不是重新創(chuàng)建。
- 生命周期管理：為了處理組件的激活和停用，keep-alive引入了activated和deactivated鉤子，在組件進入或離開緩存時觸發(fā)。
keep-alive的源碼解析
以下時抽取的部分原理代碼：
export default {
name: 'KeepAlive',
abstract: true, // 這是一個抽象組件，表示它不會直接渲染到 DOM 上
props: {
include: patternTypes, // 要緩存的組件
exclude: patternTypes, // 不緩存的組件
max: [String, Number] // 最大緩存數(shù)
},
created () {
this.cache = Object.create(null); // 緩存對象
this.keys = []; // 用來記錄緩存的順序
},
destroyed () {
for (const key in this.cache) {
pruneCacheEntry(this.cache, key, this.keys);
}
},
watch: {
include (val) {
pruneCache(this, name => matches(val, name));
},
exclude (val) {
pruneCache(this, name => !matches(val, name));
}
},
render () {
const slot = this.$slots.default;
const vnode = getFirstComponentChild(slot); // 獲取第一個子組件
if (vnode) {
const componentOptions = vnode.componentOptions;
const name = getComponentName(componentOptions);
if (name && (
(this.include && !matches(this.include, name)) ||
(this.exclude && matches(this.exclude, name))
)) {
return vnode; // 如果不匹配 include/exclude，直接返回，不緩存
}
const key = vnode.key == null
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
: vnode.key;
if (this.cache[key]) {
vnode.componentInstance = this.cache[key].componentInstance; // 從緩存中取出實例
remove(this.keys, key); // 移除舊的位置
this.keys.push(key); // 重新放到最后，更新 LRU 位置
} else {
this.cache[key] = vnode; // 緩存新實例
this.keys.push(key);
// 如果超過最大緩存數(shù)，移除最早的實例
if (this.max && this.keys.length > parseInt(this.max)) {
pruneCacheEntry(this.cache, this.keys[0], this.keys, this._vnode);
}
}
vnode.data.keepAlive = true; // 標記組件為 keep-alive
}
return vnode || (slot && slot[0]); // 返回 vnode
}
};1.緩存機制
this.cache 是一個對象，用于存儲已經(jīng)緩存的組件實例
this.keys 是一個數(shù)組，用來記錄緩存組件的順序
2.組件的緩存和激活
在render函數(shù)中，Vue判斷當前組件是否在inclue和exclude的范圍內(nèi)。如果匹配不到，則不進行緩存。
通過key標識組件，并將其與緩存實例關聯(lián)。如果組件已經(jīng)在緩存中，直接取出緩存的組件實例并復用。
3.LRU緩存策略
LRU緩存策略維持了一個有序的數(shù)據(jù)結構，記錄了緩存項的使用順序。當緩存達到容量限制時，它會移除最近最少使用的項，以便為新的數(shù)據(jù)騰出空間，常見的實現(xiàn)方式包括使用雙向鏈表和哈希表的組合，來保持緩存項的順序和快速訪問。
當this.keys的長度超過max時，刪除最早的緩存組件（即this.keys[0])
4.生命周期的管理
activated和deactivated生命周期鉤子與keep-alive緊密相關，它們在組件被從緩存中激活和停用時觸發(fā)。activated和deactivated鉤子用于管理組件的激活和停用。
到此這篇關于vue中的keep-alive用法指南的文章就介紹到這了,更多相關vue keep-alive內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖動左側導航欄變大變小，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了Vue項目中引入ESLint插件校驗代碼避免代碼錯誤的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要給大家介紹了基于axios請求封裝的vue應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
vue安裝和使用scss及sass與scss的區(qū)別詳解
這篇文章主要介紹了vue安裝和使用教程，用了很久css預編譯器，但是一直不太清楚到底用的sass還是scss，直到有天被問住了有點尷尬，感興趣的朋友一起看看吧2018-10-10
require.js 加載 vue組件 r.js 合并壓縮的實例
這篇文章主要介紹了require.js 加載 vue組件 r.js 合并壓縮的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
element-ui upload組件上傳文件類型限制問題小結
最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當選擇彈出本地選擇文件時候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動態(tài)變化的值，子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下2018-12-12
Vuex是Vue.js的官方狀態(tài)管理模式，它為Vue.js應用程序提供了一個集中式的狀態(tài)管理解決方案，Vuex可以幫助我們管理應用程序中所有組件的狀態(tài)，使得狀態(tài)管理變得更加簡單和可靠，需要詳細了解可以參考下文2023-05-05
Pinia是Vue.js的輕量級狀態(tài)管理庫,比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關于Vue3狀態(tài)管理之Pinia的入門使用教程,需要的朋友可以參考下2022-04-04