快捷導航

vue使用keep-alive進行組件緩存方法詳解(組件不緩存問題解決)

更新時間：2022年09月21日 11:03:30 作者：pipizhou16

keep-alive包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們,下面這篇文章主要給大家介紹了關(guān)于vue使用keep-alive進行組件緩存方法(組件不緩存問題解決)的相關(guān)資料,需要的朋友可以參考下

一、使用場景

在vue開發(fā)過程中（單頁面），有一些需求需要我們把頁面狀態(tài)保存下來。在切換頁面時，頁面不會進行重新加載。

一般情況下，如果不做特殊處理，會重新執(zhí)行created 和 mounted生命周期，從而重新加載頁面，默認就顯示到第一頁去了，就很煩。

（我的問題是，使用keep-alive了，但組件仍然不緩存，下面會解決）

二、認識下keep-alive

keep-alive是Vue提供的一個內(nèi)置組件，被keep-alive組件包裹的內(nèi)部組件，其狀態(tài)將被緩存
keep-alive包裹的組件，其生命周期只能被執(zhí)行一次，再次進入時不會被執(zhí)行
keep-alive包裹的組件，會自動新增兩個生命周期函數(shù)activated和deactivated，每次進入都會被執(zhí)行
activated( ) 當keepalive包含的組件再次渲染時觸發(fā)
deactivated( ) 當keepalive包含的組件銷毀時觸發(fā)
keep-alive兩個屬性include和exclude,可以讓keep-alive實現(xiàn)有條件的進行緩存。include匹配到的組件會被進行緩存，exclude匹配到的組件不會被緩存

三、在組件中應(yīng)用

//第一種：直接在組件外面套keep-alive 組件A和組件B內(nèi)容都會被緩存
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
 
//第二種：include 此時只有組件A內(nèi)容會被緩存 若有多個可用逗號分隔include="ReportA，ReportB"
      <keep-alive include="ReportA">
         <component :is="comName"></component> 
      </keep-alive>
 
//第三種：include+正則表達式或者數(shù)組 這種情況必須用v-bind (:include="")
      <keep-alive :include="['ReportA']">
         <component :is="comName"></component>
      </keep-alive> 
 
//第四種：exclude 此時組件A內(nèi)容不會被緩存，組件B內(nèi)容會被緩存
      <keep-alive exclude="ReportA">
         <component :is="comName"></component>
      </keep-alive> 
 
 
//特殊情況：若include和exclude同時出現(xiàn) exclude的優(yōu)先級是高于include的此時只緩存組件B
      <keep-alive include="ReportA,ReportB" exclude="ReportA">
         <component :is="comName"></component>
      </keep-alive> 
// 如果緩存的組件超過了max設(shè)定的值5，那么將刪除第一個緩存的組件
	  <keep-alive exclude="c" max="5">
	     <component />
	  </keep-alive>

參考鏈接:http://www.dbjr.com.cn/article/263316.htm

四、解決組件不緩存問題

我寫了兩個組件，一個房態(tài)的，一個列表，需要動態(tài)切換。
組件切換沒問題，但每次都要加載created 和 mounted生命周期。（我搜索了下原因，都沒用，后來又看了遍代碼，突然發(fā)現(xiàn)問題）

原因：主要是引入的組件，export default{ } 默認輸出，忘寫名字。

下面是代碼分享

主頁面

//主頁面
<template>
      <keep-alive include="ReportA,ReportB">
        <component :is="comName" > </component>
      </keep-alive>
</template>
<script>
import ReportA from './components/reportA.vue'
import ReportB from './components/reportB.vue'
export default {
  components: {
    ReportA,
    ReportB,
  },
}
</script>

子頁面

<script>
export default {
  name: 'ReportA',    //需要默認輸出的名字（兩個頁面都要）
}
</script>

五、keep-alive配合router使用

首先在router中為路由頁面添加meta屬性：

{
    path: '/tab',
    name: 'tab',
    meta:{
      keepAlive:true   //需要緩存
    },
    component: () => import('../views/Tab.vue')
  },
  {
    path: '/banner',
    name: 'banner',
    meta:{
      keepAlive:false   //不需要緩存
    },
    component: () => import('../views/Banner.vue')
  }

然后在App.vue中添加判斷：

    //此處是為添加了keepAlive=true 的路由添加緩存
     <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>   
     </keep-alive>
 
    //此處是為添加了keepAlive=false 的路由默認不緩存
      <router-view v-if="!$route.meta.keepAlive"/>