先來看一個項目中的需求

作為苦逼的前端開發(fā)者，我們無時無刻都要面對產(chǎn)品經(jīng)理提的各種需求, 比如下圖這個場景

場景：

從首頁的點擊導(dǎo)航進(jìn)入列表頁,

列表頁點擊列表進(jìn)入 該 數(shù)據(jù)詳情頁

從詳情頁返回，希望列表頁緩存，不重新渲染數(shù)據(jù)，這樣會提高用戶體驗。

分析一下

這樣需求，如果是小程序的話，默認(rèn)列表頁就會緩存，因為小程序的運行環(huán)境是微信客戶端，當(dāng)我們打開一個頁面會新建一個webview，

所有列表頁和詳情頁是兩個webview，當(dāng)我們進(jìn)入詳情頁，列表頁webview，只是會在詳情頁webview下面，不會銷毀。

以下是小程序運行環(huán)境：我們可以看到每個頁面都有一個webview

但是，我們的項目是用vue開發(fā)的webapp,多個組件共用一個窗口，當(dāng)我們切換路由時，切出路由組件會銷毀，所有列表頁進(jìn)入詳情頁列表頁會銷毀，重新回到列表頁，列表頁組件會重新加載。

解決方案

一、睡服提需求的人，改個簡單的需求

emm... ,看了看鏡子中的自己，估計這輩子沒辦法從臉上得到任何的便利了,老老實實換個方案吧。

那就是Keep-alive

keep-alive是Vue提供的一個抽象組件，主要用于保留組件狀態(tài)或避免重新渲染。

<keep-alive>?包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀他們。

和<transition>?相似，?<keep-alive>?是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現(xiàn)在父組件鏈中。

但是?keep-alive?會把其包裹的所有組件都緩存起來。

em...怎么辦呢，我們只是需要讓列表頁緩存啊.

分析一下

我們可以把需求拆分為2步

(1) 把需要緩存和不需要緩存的組件區(qū)分開，在組件的路由配置的元信息，meta中定義哪些需要緩存哪些不需要緩存

具體代碼如下

1，定義兩個出口?router-view

2，在router配置中定義哪些需要緩存哪些不需要緩存

開始按需緩存組件

我們從官方文檔提供的 api 入手,

keep-alive組件如果設(shè)置了 include ，就只有和 include 匹配的組件會被緩存，

所以思路就是，動態(tài)修改 include 數(shù)組來實現(xiàn)按需緩存。

此時我們發(fā)現(xiàn)，從詳情頁返回列表頁，列表頁真的不再刷新了

em...新的問題又出現(xiàn)了,由于 列表頁被緩存了,這個時候我從首頁,再點擊進(jìn)入某個列表，也不刷新了，完了，點擊首頁導(dǎo)航應(yīng)該進(jìn)入不同的列表頁的. 也就是說，從首頁進(jìn)入列表組件不應(yīng)該被緩存的。

解決一下，我們在定義路由是，在元信息中再加一個字段，這里是deepth字段，代表進(jìn)入路由的層級,比如首頁路由deepth是0.5,列表頁是1,詳情頁是2

然后在 app.vue中增加監(jiān)聽器，監(jiān)聽 我們進(jìn)入路由的 方向

具體代碼如下

em...終于解決啦，完美!!!