目錄

• 開篇場景
  
• 使用v-for直接渲染
  
• 直接用自定義元件渲染
• keep-alve 強大的快取存在的問題
  
• 總結

開篇場景

我的專案是前後端沒有分離的，技術棧是layui++jq,vue是我後面引入的，為了能夠更好的元件化，將頁面元件化，減少程式碼重複量，因為jq的頁面需要經常獲取dom 元素，導致頁面非常的冗餘，jq 的頁面也不好做元件化，將頁面的功能抽離封裝，所以我引入了vue，最近需要是實現一個需求，就是多頁面快取，通過點選左邊的選單欄，右邊展示頁面，但是需要將點選過的頁面都進行快取，如下圖

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

使用v-for直接渲染

剛開始我的想法是設計一個數組，每次點選的時候將點選的元件push到一個數組，然後通過v-for用自定義元件進行遍歷；

發現點選的時候會把內容都加進去，這個時候就需要一個index,來顯示當前的高亮，而且需求是每次只顯示一個頁面，這個時候就要通過index去隱藏其他的頁面。

v-for存在問題，刪除的時候會因為陣列改變重新渲染

此時可以看到實現了這個功能，但是每次點選都新增很多相同的元素 這個時候我們就可以做去重的操作

通過去重簡單的實現了多頁面的功能

因為我的功能是需要實現多頁面快取 就是要將這些頁面都快取起來，所以我用了keep-alive這個元件，但是陣列改變的時候，頁面會發生重新渲染

當我操作了B 頁面 我把A 頁面關閉也就是刪除之後B 頁面就重新渲染了 這就達不到我要的快取的效果。所以並不能直接使用v-for 直接進行渲染

我後面想到自己實現個自定義指令，自己去判斷是否重新渲染， 但是自定義指令根本沒有this ，拿不到例項也就拿不到vnode 也就沒法自己實現快取。

後面我想自己寫個元件用x 語法去渲染 自己判斷是否快取，還是重新建立例項，但是 我拿到快取渲染不上去。
之後我就想到了keep-alive這個元件，不迴圈直接渲染當前高亮的那個頁面

直接用自定義元件渲染

這時候 可以實現快取的功能了，自己實現一個keep-alive還是很麻煩的，自帶的這個keep-alive 還是很好用的，快取還是很強的，

keep-alve 強大的快取存在的問題

後面我發現了一個問題， 當我在頁面做了操作，關閉了之後，在重新點開的時候，頁面還是有資料，只能說keep-alive的快取太厲害了，之後我就想怎麼去清除這個快取，官網有2個api，include跟exclude，include是包含那些元件的name 才會快取，exclude剛好相反，是包含了那些就不快取，但是我的頁面元件是之前就構建好的，是個匿名的元件

我試過加name 並不能起到效果，我在度娘上查了下怎麼清除快取的，

參考文章：https://www.jb51.net/article/219189.htm

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

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

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

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

找到cache 可以看到它裡面的key名字跟我們元件的名字有關係，可以用indexOf 去匹配然後刪除cache

可以看到功能已經www.cppcns.com實現了，這樣子就可以實現多頁面快取了。

不得不說 vue還是很強大的 keep-alive 還是很厲害的

總結

到此這篇關於keep-alive如何清除快取的文章就介紹到這了,更多相關keep-alive清除快取內容請搜尋我們以前的文章或繼續客棧瀏覽下面的相關文章希望大家以後多多支援我們！