快捷導(dǎo)航

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

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

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

一、使用場(chǎng)景

在vue開(kāi)發(fā)過(guò)程中（單頁(yè)面），有一些需求需要我們把頁(yè)面狀態(tài)保存下來(lái)。在切換頁(yè)面時(shí)，頁(yè)面不會(huì)進(jìn)行重新加載。

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

（我的問(wèn)題是，使用keep-alive了，但組件仍然不緩存，下面會(huì)解決）

二、認(rèn)識(shí)下keep-alive

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

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

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

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

四、解決組件不緩存問(wèn)題

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

原因：主要是引入的組件，export default{ } 默認(rèn)輸出，忘寫(xiě)名字。

下面是代碼分享

主頁(yè)面

//主頁(yè)面
<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>

子頁(yè)面

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

五、keep-alive配合router使用

首先在router中為路由頁(yè)面添加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 的路由默認(rèn)不緩存
      <router-view v-if="!$route.meta.keepAlive"/>