vue的keep-alive怎么正確使用
這篇文章主要講解了“vue的keep-alive怎么正確使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“vue的keep-alive怎么正確使用”吧！
創(chuàng)新互聯(lián)公司成都網(wǎng)站建設(shè)定制網(wǎng)站，是成都營(yíng)銷推廣公司,為混凝土攪拌罐車提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開(kāi)發(fā)等。成都網(wǎng)站制作熱線：028-86922220
先來(lái)看一個(gè)項(xiàng)目中的需求
作為苦逼的前端開(kāi)發(fā)者，我們無(wú)時(shí)無(wú)刻都要面對(duì)產(chǎn)品經(jīng)理提的各種需求, 比如這個(gè)場(chǎng)景
場(chǎng)景：
從首頁(yè)的點(diǎn)擊導(dǎo)航進(jìn)入列表頁(yè),
列表頁(yè)點(diǎn)擊列表進(jìn)入 該 數(shù)據(jù)詳情頁(yè)
從詳情頁(yè)返回，希望列表頁(yè)緩存，不重新渲染數(shù)據(jù)，這樣會(huì)提高用戶體驗(yàn)。
分析一下
這樣需求，如果是小程序的話，默認(rèn)列表頁(yè)就會(huì)緩存，因?yàn)樾〕绦虻倪\(yùn)行環(huán)境是微信客戶端，當(dāng)我們打開(kāi)一個(gè)頁(yè)面會(huì)新建一個(gè)webview，
所有列表頁(yè)和詳情頁(yè)是兩個(gè)webview，當(dāng)我們進(jìn)入詳情頁(yè)，列表頁(yè)webview，只是會(huì)在詳情頁(yè)webview下面，不會(huì)銷毀。
以下是小程序運(yùn)行環(huán)境：我們可以看到每個(gè)頁(yè)面都有一個(gè)webview
但是但是，我們的項(xiàng)目是用vue開(kāi)發(fā)的webapp,多個(gè)組件共用一個(gè)窗口，當(dāng)我們切換路由時(shí)，切出路由組件會(huì)銷毀，所有列表頁(yè)進(jìn)入詳情頁(yè)列表頁(yè)會(huì)銷毀，重新回到列表頁(yè)，列表頁(yè)組件會(huì)重新加載。
解決方案
睡服提需求的人，改個(gè)簡(jiǎn)單的需求
emm... ,看了看鏡子中的自己，估計(jì)這輩子沒(méi)辦法從臉上得到任何的便利了,老老實(shí)實(shí)換個(gè)方案吧。
keep-alive
keep-alive是Vue提供的一個(gè)抽象組件，主要用于保留組件狀態(tài)或避免重新渲染。
和
但是 keep-alive 會(huì)把其包裹的所有組件都緩存起來(lái)。
em...怎么辦呢，我們只是需要讓列表頁(yè)緩存啊.
分析一下
我們可以把需求拆分為2步
(1) 把需要緩存和不需要緩存的組件區(qū)分開(kāi)，在組件的路由配置的元信息，meta中定義哪些需要緩存哪些不需要緩存
具體代碼如下
1，定義兩個(gè)出口 router-view
2，在router配置中定義哪些需要緩存哪些不需要緩存
new Router({
routes: [
{
path: '/',
name: 'index',
component: () => import('./views/keep-alive/index.vue')
},
{
path: '/list',
name: 'list',
component: () => import('./views/keep-alive/list.vue'),
meta: {
keepAlive: true //需要被緩存
}
},
{
path: '/detail',
name: 'detail',
component: () => import('./views/keep-alive/detail.vue')
}
]
})
(2)，開(kāi)始按需緩存組件
我們從官方文檔提供的 api 入手,
keep-alive組件如果設(shè)置了 include ，就只有和 include 匹配的組件會(huì)被緩存，
所以思路就是，動(dòng)態(tài)修改 include 數(shù)組來(lái)實(shí)現(xiàn)按需緩存。
此時(shí)我們發(fā)現(xiàn)，從詳情頁(yè)返回列表頁(yè)，列表頁(yè)真的不再刷新了
em...新的問(wèn)題又出現(xiàn)了,由于 列表頁(yè)被緩存了,這個(gè)時(shí)候我從首頁(yè),再點(diǎn)擊進(jìn)入某個(gè)列表，也不刷新了，完了，點(diǎn)擊首頁(yè)導(dǎo)航應(yīng)該進(jìn)入不同的列表頁(yè)的. 也就是說(shuō)，從首頁(yè)進(jìn)入列表組件不應(yīng)該被緩存的。
解決一下，我們?cè)诙x路由是，在元信息中再加一個(gè)字段，這里是deepth字段，代表進(jìn)入路由的層級(jí),比如首頁(yè)路由deepth是0.5,列表頁(yè)是1,詳情頁(yè)是2
new Router({
routes: [
{
path: '/',
name: 'index',
component: () => import('./views/keep-alive/index.vue'),
meta: {
deepth: 0.5 // 定義路由的層級(jí)
}
},
{
path: '/list',
name: 'list',
component: () => import('./views/keep-alive/list.vue'),
meta: {
deepth: 1
keepAlive: true //需要被緩存
}
},
{
path: '/detail',
name: 'detail',
component: () => import('./views/keep-alive/detail.vue'),
meta: {
deepth: 2
}
}
]
})
然后在 app.vue中增加監(jiān)聽(tīng)器，監(jiān)聽(tīng) 我們進(jìn)入路由的 方向
具體代碼如下
感謝各位的閱讀，以上就是“vue的keep-alive怎么正確使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)vue的keep-alive怎么正確使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
當(dāng)前文章：vue的keep-alive怎么正確使用
當(dāng)前鏈接：http://m.jiaotiyi.com/article/gihdie.html