Vue3手動(dòng)清理keep-alive組件緩存的方法詳解
更新時(shí)間：2024年04月03日 08:59:58 作者：xinfei
這篇文章主要為大家詳細(xì)介紹了Vue3中手動(dòng)清理keep-alive組件緩存的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
Vue3中手動(dòng)清理keep-alive組件緩存的一個(gè)解決方案
源碼
if ((process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__) {
instance.__v_cache = cache;
}
//省略一些代碼...
function pruneCacheEntry(key) {
const cached = cache.get(key);
if (!current || cached.type !== current.type) {
unmount(cached);
}
else if (current) {
// current active instance should no longer be kept-alive.
// we can't unmount it now but it might be later, so reset its flag now.
resetShapeFlag(current);
}
cache.delete(key);
keys.delete(key);
}
這里表明我們有兩種修改方案：
方案一：注釋 instance.__v_cache = cache; 這行代碼的判斷條件，也就是注釋掉它的if判斷，這樣無(wú)論在什么環(huán)境，我們都可以取到__v_cache對(duì)象，這樣就可以按照上一篇的方案來(lái)解決手動(dòng)釋放的問(wèn)題
方案二：注意到源碼中的pruneCacheEntry函數(shù)就是通過(guò)key來(lái)釋放緩存，所以如果僅僅是想通過(guò)key來(lái)釋放緩存，那么可以通過(guò)將pruneCacheEntry函數(shù)暴露出來(lái)實(shí)現(xiàn)我們的要求
方案一
修改vue.config.js，在文件開(kāi)頭添加下面的代碼：
const path = require("path");
const fs = require("fs");
try {
const vue_bundler_file = path.resolve(
__dirname,
"node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js"
);
//使用同步讀取文件
let data = fs.readFileSync(vue_bundler_file, "utf8");
//如果未添加過(guò)
if (data.indexOf("http://__v_cache") < 0) {
console.log("正在修改源碼文件：", vue_bundler_file);
//先找到__v_cache變量的位置
let index = data.indexOf("__v_cache");
if (index >= 0) {
// 繼續(xù)往前找if關(guān)鍵字
index = data.lastIndexOf("if ", index);
if (index >= 0) {
//從上一個(gè)位置開(kāi)始
index -= 1;
//然后放一個(gè)注釋
const comment = " //__v_cache ";
//然后拼接
data = data.substring(0, index) + comment + data.substring(index);
//繼續(xù)往后找下一個(gè)大括號(hào) }
index = data.indexOf("}", index);
if (index >= 0) {
//從上一個(gè)位置開(kāi)始
index -= 1;
//然后拼接
data = data.substring(0, index) + comment + data.substring(index);
}
fs.writeFileSync(vue_bundler_file, data, "utf8");
}
}
}
} catch (er) {
console.error(er.message);
}
然后重新啟動(dòng)運(yùn)行項(xiàng)目，就可以按照上一篇的方式，通過(guò) __v_cache 對(duì)象來(lái)手動(dòng)清理keep-alive的緩存了。
export default {
setup() {
const instance = getCurrentInstance();
const handler = new KeepAliveHandler();
onMounted(() => {
const keepAlive = instance.refs.keepAlive;
handler.bind(keepAlive);
});
const remove = (key) => {
handler.remove(key);
};
return {
remove,
};
},
};
如果打開(kāi) node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 文件，搜索 __v_cache ，會(huì)看到這樣的代碼片段：
方案二
在 vue.config.js 中開(kāi)頭添加如下代碼：
const path = require("path");
const fs = require("fs");
try {
const vue_bundler_file = path.resolve(
__dirname,
"node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js"
);
//使用同步讀取文件
const data = fs.readFileSync(vue_bundler_file, "utf8");
//如果未添加過(guò)
if (data.indexOf("sharedContext.$pruneCacheEntry") < 0) {
console.log("正在修改源碼文件：", vue_bundler_file);
//先找到__v_cache變量的位置
let index = data.indexOf("__v_cache");
if (index >= 0) {
// 繼續(xù)找下一個(gè)大括號(hào) }
index = data.indexOf("}", index);
if (index >= 0) {
//從下一個(gè)位置開(kāi)始
index += 1;
//然后放一個(gè)可以釋放的函數(shù)
const remove =
" sharedContext.$pruneCacheEntry = (key) => cache.get(key) && pruneCacheEntry(key);";
//然后拼接
const result =
data.substring(0, index) +
"\r\n" +
remove +
"\r\n" +
data.substring(index);
fs.writeFileSync(vue_bundler_file, result, "utf8");
}
}
}
} catch (er) {
console.error(er.message);
}
const path = require("path");
const fs = require("fs");
try {
const vue_bundler_file = path.resolve(
__dirname,
"node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js"
);
//使用同步讀取文件
const data = fs.readFileSync(vue_bundler_file, "utf8");
//如果未添加過(guò)
if (data.indexOf("sharedContext.$pruneCacheEntry") < 0) {
console.log("正在修改源碼文件：", vue_bundler_file);
//先找到__v_cache變量的位置
let index = data.indexOf("__v_cache");
if (index >= 0) {
// 繼續(xù)找下一個(gè)大括號(hào) }
index = data.indexOf("}", index);
if (index >= 0) {
//從下一個(gè)位置開(kāi)始
index += 1;
//然后放一個(gè)可以釋放的函數(shù)
const remove =
" sharedContext.$pruneCacheEntry = function(key) {\r\n" +
" const cached = cache.get(key);\r\n" +
" if (cached) {\r\n" +
" if (cached.key == current?.key) {\r\n" +
" resetShapeFlag(current);\r\n" +
" } else {\r\n" +
" unmount(cached);\r\n" +
" }\r\n" +
" cache.delete(key);\r\n" +
" keys.delete(key);\r\n" +
" }\r\n" +
" }\r\n"
//然后拼接
const result =
data.substring(0, index) +
"\r\n" +
remove +
"\r\n" +
data.substring(index);
fs.writeFileSync(vue_bundler_file, result, "utf8");
}
}
}
} catch (er) {
console.error(er.message);
}
之后，我們項(xiàng)目重新運(yùn)行后，就可以通過(guò)ref取到keep-alive組件的引用，然后使用這個(gè)引用對(duì)象直接使用$pruneCacheEntry函數(shù)來(lái)刪除指定key的緩存了：
this.$refs.keepAlive.$pruneCacheEntry("key")如果打開(kāi) node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 文件，搜索 __v_cache ，會(huì)看到這樣的代碼片段：
結(jié)語(yǔ)
目前，目前還沒(méi)有找到更好的解決方案，我自己采用的是第二種方案，算是暫時(shí)解決了問(wèn)題，當(dāng)然，兩種方案可以結(jié)合使用。
到此這篇關(guān)于Vue3手動(dòng)清理keep-alive組件緩存的方法詳解的文章就介紹到這了,更多相關(guān)Vue3清理keep-alive組件緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中實(shí)現(xiàn)點(diǎn)擊變成全屏及縮放功能
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊變成全屏及縮放功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
在?Vue?框架中,哪些地方容易被攻擊呢？寫(xiě)代碼的時(shí)候要注意什么呢？這篇文章中小編為大家總結(jié)了一些常見(jiàn)的容易受到攻擊的地方,希望對(duì)大家有所幫助2024-02-02
Vue Element前端應(yīng)用開(kāi)發(fā)之常規(guī)的JS處理函數(shù)
在我們使用Vue Element處理界面的時(shí)候，往往碰到需要利用JS集合處理的各種方法，如Filter、Map、reduce等方法，也可以涉及到一些對(duì)象屬性賦值等常規(guī)的處理或者遞歸的處理方法，本篇隨筆列出一些在VUE+Element 前端開(kāi)發(fā)中經(jīng)常碰到的JS處理場(chǎng)景，供參考學(xué)習(xí)。2021-05-05
本文通過(guò)一個(gè)小例子給大家介紹了vue2.0父子組件間傳遞數(shù)據(jù)的方法，需要的朋友參考下吧2018-08-08
vite+vue3+element-plus項(xiàng)目搭建的方法步驟
因?yàn)関ue3出了一段時(shí)間了，element也出了基于vue3.x版本的element-plus，vite打包聽(tīng)說(shuō)很快，嘗試一下，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了讓你30分鐘快速掌握vue3，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
本篇文章給大家分享了Vue取消eslint語(yǔ)法限制的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們可以參考學(xué)習(xí)下。2018-08-08
vue使用v-model進(jìn)行跨組件綁定的基本實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue使用v-model進(jìn)行跨組件綁定的基本實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue與compressor.js實(shí)現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時(shí)文件壓縮實(shí)現(xiàn)方法,通過(guò)在上傳過(guò)程中對(duì)文件進(jìn)行壓縮,減小文件大小,提升上傳速度,為用戶(hù)創(chuàng)造更快捷、高效的上傳體驗(yàn),感興趣的朋友跟隨小編一起看看吧2024-03-03
在?Vue?中,provide?和?inject?是用于實(shí)現(xiàn)祖先組件向后代組件傳遞數(shù)據(jù)的一種方式,本文主要來(lái)和大家詳細(xì)講講provide和inject的使用方法,希望對(duì)大家有所幫助2024-02-02