vue的keep-alive怎么正確使用

這篇文章主要講解了“vue的keep-alive怎么正確使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue的keep-alive怎么正確使用”吧！

創(chuàng)新互聯(lián)公司成都網(wǎng)站建設(shè)定制網(wǎng)站，是成都營銷推廣公司,為混凝土攪拌罐車提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計、前端HTML5制作、后臺程序開發(fā)等。成都網(wǎng)站制作熱線：028-86922220

先來看一個項目中的需求

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

場景：

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

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

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

分析一下

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

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

以下是小程序運(yùn)行環(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

<keep-alive>

<!-- 需要緩存的視圖組件 -->

<router-view v-if="$route.meta.keepAlive">

</router-view>

</keep-alive>

<!-- 不需要緩存的視圖組件 -->

<router-view v-if="!$route.meta.keepAlive">

</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)，開始按需緩存組件

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

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

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

<template>

<keep-alive :include="include">

<!-- 需要緩存的視圖組件 -->

<router-view v-if="$route.meta.keepAlive">

</router-view>

</keep-alive>

<!-- 不需要緩存的視圖組件 -->

<router-view v-if="!$route.meta.keepAlive">

</router-view>

</template>

<script>

export default {

name: "app",

data: () => ({

include: []

}),

watch: {

$route(to, from) {

//如果 要 to(進(jìn)入) 的頁面是需要 keepAlive 緩存的，把 name push 進(jìn) include數(shù)組

if (to.meta.keepAlive) {

!this.include.includes(to.name) && this.include.push(to.name);

}

}

}

};

</script>

此時我們發(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

new Router({

routes: [

{

path: '/',

name: 'index',

component: () => import('./views/keep-alive/index.vue'),

meta: {

deepth: 0.5 // 定義路由的層級

}

},

{

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)聽器，監(jiān)聽 我們進(jìn)入路由的 方向

具體代碼如下

<template>

<keep-alive :include="include">

<!-- 需要緩存的視圖組件 -->

<router-view v-if="$route.meta.keepAlive">

</router-view>

</keep-alive>

<!-- 不需要緩存的視圖組件 -->

<router-view v-if="!$route.meta.keepAlive">

</router-view>

</template>

<script>

export default {

name: "app",

data: () => ({

include: []

}),

watch: {

$route(to, from) {

//如果 要 to(進(jìn)入) 的頁面是需要 keepAlive 緩存的，把 name push 進(jìn) include數(shù)組

if (to.meta.keepAlive) {

!this.include.includes(to.name) && this.include.push(to.name);

}

//如果 要 form(離開) 的頁面是 keepAlive緩存的，

//再根據(jù) deepth 來判斷是前進(jìn)還是后退

//如果是后退

if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {

var index = this.include.indexOf(from.name);

index !== -1 && this.include.splice(index, 1);

}

}

}

};

</script>

感謝各位的閱讀，以上就是“vue的keep-alive怎么正確使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue的keep-alive怎么正確使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

分享標(biāo)題：vue的keep-alive怎么正確使用
URL標(biāo)題：http://bm7419.com/article4/gihdie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、服務(wù)器托管、定制開發(fā)、動態(tài)網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站