vue的keep-alive怎么正確使用

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

　　先來看一個項目中的需求

　　作為苦逼的前端開發者，我們無時無刻都要面對產品經理提的各種需求, 比如這個場景

　　場景：

　　從首頁的點擊導航進入列表頁,

　　列表頁點擊列表進入 該 數據詳情頁

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

　　分析一下

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

　　所有列表頁和詳情頁是兩個webview，當我們進入詳情頁，列表頁webview，只是會在詳情頁webview下面，不會銷毀。

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

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

　　解決方案

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

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

　　keep-alive

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

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

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

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

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

　　分析一下

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

　　(1) 把需要緩存和不需要緩存的組件區分開，在組件的路由配置的元信息，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組件如果設置了 include ，就只有和 include 匹配的組件會被緩存，

　　所以思路就是，動態修改 include 數組來實現按需緩存。

　　<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(進入) 的頁面是需要 keepAlive 緩存的，把 name push 進 include數組

　　if (to.meta.keepAlive) {

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

　　}

　　}

　　}

　　};

　　</script>

　　此時我們發現，從詳情頁返回列表頁，列表頁真的不再刷新了

　　em...新的問題又出現了,由于 列表頁被緩存了,這個時候我從首頁,再點擊進入某個列表，也不刷新了，完了，點擊首頁導航應該進入不同的列表頁的. 也就是說，從首頁進入列表組件不應該被緩存的。

　　解決一下，我們在定義路由是，在元信息中再加一個字段，這里是deepth字段，代表進入路由的層級,比如首頁路由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中增加監聽器，監聽 我們進入路由的 方向

　　具體代碼如下

　　<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(進入) 的頁面是需要 keepAlive 緩存的，把 name push 進 include數組

　　if (to.meta.keepAlive) {

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

　　}

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

　　//再根據 deepth 來判斷是前進還是后退

　　//如果是后退

　　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怎么正確使用”的內容了，經過本文的學習后，相信大家對vue的keep-alive怎么正確使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！