vue?Keep-alive組件緩存的簡單使用代碼

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

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

Props：

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

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

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

用法：

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

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

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

deactivated：在 keep-alive 組件停用時調用，該鉤子在服務器端渲染期間不被調用。

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

一、基本用法

<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)或避免重新渲染。比如在動態(tài)組件中，為組件A和組件B分別設置了隨機數(shù)編號，若在切換組件后又顯示新的隨機數(shù)體驗極差，因此要用到keep-alive，下面聊聊keep-alive的各種用法。

App.vue：

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

二、結合Router使用

默認情況下在點擊標題幾后跳轉到別的組件再回到Tab切換組件后仍是展示默認的內容1，此時可以結合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"/>

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