快捷導(dǎo)航

vue?Keep-alive組件緩存的簡(jiǎn)單使用代碼

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

keep-alive是Vue提供的一個(gè)抽象組件,用來對(duì)組件進(jìn)行緩存,從而節(jié)省性能,下面這篇文章主要給大家介紹了關(guān)于vue?Keep-alive組件緩存的簡(jiǎn)單使用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Props：

include - 字符串或正則表達(dá)式。只有名稱匹配的組件會(huì)被緩存。

exclude - 字符串或正則表達(dá)式。任何名稱匹配的組件都不會(huì)被緩存。

max - 數(shù)字。最多可以緩存多少組件實(shí)例。

用法：

keep-alive包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在組件的父組件鏈中。當(dāng)組件在 <keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。

被包含在 keep-alive 中創(chuàng)建的組件，會(huì)多出兩個(gè)生命周期的鉤子: activated 與 deactivated。

activated：在 keep-alive 組件激活時(shí)調(diào)用，該鉤子函數(shù)在服務(wù)器端渲染期間不被調(diào)用。

deactivated：在 keep-alive 組件停用時(shí)調(diào)用，該鉤子在服務(wù)器端渲染期間不被調(diào)用。

使用 keep-alive 會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁(yè)面的時(shí)候獲取最新的數(shù)據(jù)，需要在 activated 階段獲取數(shù)據(jù)，承擔(dān)原來 created 鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)。

一、基本用法

<template>
 <div>
    <div>
      <button @click="flag='testA'">A組件</button>
      <button @click="flag='testB'">B組件</button>
      <component :is="flag"></component>
    </div>
 </div>
</template>
 
<script>
import testA from './testA'; 
 
export default {
  data(){
    return{
      flag:'testA'
    }
  },
  methods:{
 
  },
  components:{
    testA,
   'testB': () => import('./testB') 
  }
}
</script>

keep-alive主要用于保留組件狀態(tài)或避免重新渲染。比如在動(dòng)態(tài)組件中，為組件A和組件B分別設(shè)置了隨機(jī)數(shù)編號(hào)，若在切換組件后又顯示新的隨機(jī)數(shù)體驗(yàn)極差，因此要用到keep-alive，下面聊聊keep-alive的各種用法。

App.vue：

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

二、結(jié)合Router使用

默認(rèn)情況下在點(diǎn)擊標(biāo)題幾后跳轉(zhuǎn)到別的組件再回到Tab切換組件后仍是展示默認(rèn)的內(nèi)容1，此時(shí)可以結(jié)合router來緩存其內(nèi)容達(dá)到上圖的效果。

首先在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"/>

注：本文演示所用案例來自金渡教育課件