開篇場景

我的項目是前后端沒有分離的，技術(shù)棧是layui+vue+jq,vue是我后面引入的，為了能夠更好的組件化，將頁面組件化，減少代碼重復(fù)量，因為jq的頁面需要經(jīng)常獲取dom 元素，導(dǎo)致頁面非常的冗余，jq 的頁面也不好做組件化，將頁面的功能抽離封裝，所以我引入了vue，最近需要是實現(xiàn)一個需求，就是多頁面緩存，通過點擊左邊的菜單欄，右邊展示頁面，但是需要將點擊過的頁面都進(jìn)行緩存，如下圖

這是我做的一個簡單的例子

使用v-for直接渲染

剛開始我的想法是設(shè)計一個數(shù)組，每次點擊的時候?qū)Ⅻc擊的組件push到一個數(shù)組，然后通過v-for用自定義組件進(jìn)行遍歷；

發(fā)現(xiàn)點擊的時候會把內(nèi)容都加進(jìn)去，這個時候就需要一個index,來顯示當(dāng)前的高亮，而且需求是每次只顯示一個頁面，這個時候就要通過index去隱藏其他的頁面。

v-for存在問題，刪除的時候會因為數(shù)組改變重新渲染

此時可以看到實現(xiàn)了這個功能，但是每次點擊都添加很多相同的元素 這個時候我們就可以做去重的操作

通過去重簡單的實現(xiàn)了多頁面的功能

因為我的功能是需要實現(xiàn)多頁面緩存 就是要將這些頁面都緩存起來，所以我用了keep-alive這個組件，但是數(shù)組改變的時候，頁面會發(fā)生重新渲染

當(dāng)我操作了B 頁面 我把A 頁面關(guān)閉也就是刪除之后B 頁面就重新渲染了 這就達(dá)不到我要的緩存的效果。所以并不能直接使用v-for 直接進(jìn)行渲染

我后面想到自己實現(xiàn)個自定義指令，自己去判斷是否重新渲染， 但是自定義指令根本沒有this ，拿不到實例也就拿不到vnode 也就沒法自己實現(xiàn)緩存。

后面我想自己寫個組件用jsx 語法去渲染 自己判斷是否緩存，還是重新創(chuàng)建實例，但是 我拿到緩存渲染不上去。
之后我就想到了keep-alive這個組件，不循環(huán)直接渲染當(dāng)前高亮的那個頁面

直接用自定義組件渲染

這時候 可以實現(xiàn)緩存的功能了，自己實現(xiàn)一個keep-alive還是很麻煩的，自帶的這個keep-alive 還是很好用的，緩存還是很強(qiáng)的，

keep-alve 強(qiáng)大的緩存存在的問題

后面我發(fā)現(xiàn)了一個問題， 當(dāng)我在頁面做了操作，關(guān)閉了之后，在重新點開的時候，頁面還是有數(shù)據(jù)，只能說keep-alive的緩存太厲害了，之后我就想怎么去清除這個緩存，官網(wǎng)有2個api，include跟exclude，include是包含那些組件的name 才會緩存，exclude剛好相反，是包含了那些就不緩存，但是我的頁面組件是之前就構(gòu)建好的，是個匿名的組件

我試過加name 并不能起到效果，我在度娘上查了下怎么清除緩存的，

參考文章：http://www.dbjr.com.cn/article/219189.htm

我就想到了 我能不能刪除的時候也把它的緩存也清除了

找了好久還是讓我找到了cache

這個是我簡單寫的例子是在 $children[0].$options.parent.cache,在我真實的項目是_vnode.chindren.componentInstance里面的第一個元素里面

最關(guān)鍵是這個帶有keep-alive的 如果當(dāng)你找到這個東西 你就能找到cache了，我之前試過寫jsx，好像沒找到cache這個東西，估計是沒有keep-alive就沒有cache，自己實現(xiàn)一個keep-alive還是很難的。

找到cache 可以看到它里面的key名字跟我們組件的名字有關(guān)系，可以用indexOf 去匹配然后刪除cache

可以看到功能已經(jīng)實現(xiàn)了，這樣子就可以實現(xiàn)多頁面緩存了。

不得不說 vue還是很強(qiáng)大的 keep-alive 還是很厲害的

總結(jié)

到此這篇關(guān)于keep-alive如何清除緩存的文章就介紹到這了,更多相關(guān)keep-alive清除緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論