圖文詳解keep-alive如何清除緩存
開篇場(chǎng)景
我的項(xiàng)目是前后端沒有分離的，技術(shù)棧是layui+vue+jq,vue是我后面引入的，為了能夠更好的組件化，將頁面組件化，減少代碼重復(fù)量，因?yàn)閖q的頁面需要經(jīng)常獲取dom 元素，導(dǎo)致頁面非常的冗余，jq 的頁面也不好做組件化，將頁面的功能抽離封裝，所以我引入了vue，最近需要是實(shí)現(xiàn)一個(gè)需求，就是多頁面緩存，通過點(diǎn)擊左邊的菜單欄，右邊展示頁面，但是需要將點(diǎn)擊過的頁面都進(jìn)行緩存，如下圖
這是我做的一個(gè)簡(jiǎn)單的例子
使用v-for直接渲染
剛開始我的想法是設(shè)計(jì)一個(gè)數(shù)組，每次點(diǎn)擊的時(shí)候?qū)Ⅻc(diǎn)擊的組件push到一個(gè)數(shù)組，然后通過v-for用自定義組件進(jìn)行遍歷；
發(fā)現(xiàn)點(diǎn)擊的時(shí)候會(huì)把內(nèi)容都加進(jìn)去，這個(gè)時(shí)候就需要一個(gè)index,來顯示當(dāng)前的高亮，而且需求是每次只顯示一個(gè)頁面，這個(gè)時(shí)候就要通過index去隱藏其他的頁面。
v-for存在問題，刪除的時(shí)候會(huì)因?yàn)閿?shù)組改變重新渲染
此時(shí)可以看到實(shí)現(xiàn)了這個(gè)功能，但是每次點(diǎn)擊都添加很多相同的元素 這個(gè)時(shí)候我們就可以做去重的操作
通過去重簡(jiǎn)單的實(shí)現(xiàn)了多頁面的功能
因?yàn)槲业墓δ苁切枰獙?shí)現(xiàn)多頁面緩存 就是要將這些頁面都緩存起來，所以我用了keep-alive這個(gè)組件，但是數(shù)組改變的時(shí)候，頁面會(huì)發(fā)生重新渲染
當(dāng)我操作了B 頁面 我把A 頁面關(guān)閉也就是刪除之后B 頁面就重新渲染了 這就達(dá)不到我要的緩存的效果。所以并不能直接使用v-for 直接進(jìn)行渲染
我后面想到自己實(shí)現(xiàn)個(gè)自定義指令，自己去判斷是否重新渲染， 但是自定義指令根本沒有this ，拿不到實(shí)例也就拿不到vnode 也就沒法自己實(shí)現(xiàn)緩存。
后面我想自己寫個(gè)組件用jsx 語法去渲染 自己判斷是否緩存，還是重新創(chuàng)建實(shí)例，但是 我拿到緩存渲染不上去。
之后我就想到了keep-alive這個(gè)組件，不循環(huán)直接渲染當(dāng)前高亮的那個(gè)頁面
直接用自定義組件渲染
這時(shí)候 可以實(shí)現(xiàn)緩存的功能了，自己實(shí)現(xiàn)一個(gè)keep-alive還是很麻煩的，自帶的這個(gè)keep-alive 還是很好用的，緩存還是很強(qiáng)的，
keep-alve 強(qiáng)大的緩存存在的問題
后面我發(fā)現(xiàn)了一個(gè)問題， 當(dāng)我在頁面做了操作，關(guān)閉了之后，在重新點(diǎn)開的時(shí)候，頁面還是有數(shù)據(jù)，只能說keep-alive的緩存太厲害了，之后我就想怎么去清除這個(gè)緩存，官網(wǎng)有2個(gè)api，include跟exclude，include是包含那些組件的name 才會(huì)緩存，exclude剛好相反，是包含了那些就不緩存，但是我的頁面組件是之前就構(gòu)建好的，是個(gè)匿名的組件
我試過加name 并不能起到效果，我在度娘上查了下怎么清除緩存的，
參考文章：http://m.fzitv.net/article/219189.htm
我就想到了 我能不能刪除的時(shí)候也把它的緩存也清除了
找了好久還是讓我找到了cache
這個(gè)是我簡(jiǎn)單寫的例子是在 $children[0].$options.parent.cache,在我真實(shí)的項(xiàng)目是_vnode.chindren.componentInstance里面的第一個(gè)元素里面
最關(guān)鍵是這個(gè)帶有keep-alive的 如果當(dāng)你找到這個(gè)東西 你就能找到cache了，我之前試過寫jsx，好像沒找到cache這個(gè)東西，估計(jì)是沒有keep-alive就沒有cache，自己實(shí)現(xiàn)一個(gè)keep-alive還是很難的。
找到cache 可以看到它里面的key名字跟我們組件的名字有關(guān)系，可以用indexOf 去匹配然后刪除cache
可以看到功能已經(jīng)實(shí)現(xiàn)了，這樣子就可以實(shí)現(xiàn)多頁面緩存了。
不得不說 vue還是很強(qiáng)大的 keep-alive 還是很厲害的
總結(jié)
到此這篇關(guān)于keep-alive如何清除緩存的文章就介紹到這了,更多相關(guān)keep-alive清除緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求
本篇文章主要介紹了Vuejs2.0 如何利用proxyTable實(shí)現(xiàn)跨域請(qǐng)求，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
今天小編就為大家分享一篇vue.js單文件組件中非父子組件的傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
冒泡事件處理是由內(nèi)而外發(fā)生的,例如有兩個(gè)父子div,給他們分別寫上點(diǎn)擊事件,點(diǎn)擊子div先響應(yīng)的是子div,再是父div,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目遇見事件冒泡該如何處理的相關(guān)資料,需要的朋友可以參考下2023-04-04
vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)的經(jīng)典計(jì)算器/科學(xué)計(jì)算器功能,具有基本四則運(yùn)算計(jì)算器以及科學(xué)計(jì)算器的功能,可實(shí)現(xiàn)開方、乘方、三角函數(shù)以及公式運(yùn)算等功能,需要的朋友可以參考下2018-07-07
uniapp前端支付篇之微信、抖音、快手、h5四個(gè)平臺(tái)支付功能
支付功能在我們?nèi)粘ｉ_發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp前端支付篇之微信、抖音、快手、h5四個(gè)平臺(tái)支付功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
本文主要介紹了Vue實(shí)現(xiàn)全局菜單搜索框的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)
這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細(xì)完整教程,在這大家要記住整個(gè)項(xiàng)目的json文件不能有注釋,及時(shí)沒報(bào)錯(cuò)也不行,否則運(yùn)行命令時(shí)還是有問題,具體細(xì)節(jié)問題參考下本文詳細(xì)講解2024-02-02
淺談webpack SplitChunksPlugin實(shí)用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue.js系列之vue-router(上)(3)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了Antd的table組件表格的序號(hào)自增操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10