vue中 keep-alive的作用 和activated 和 deactivated 生命周期理解

keep-alive 簡介

keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。

用法

<keep-alive>
  <component>
    <!-- 該組件將被緩存！ -->
  </component>
</keep-alive>

props

• include - 字符串或正則表達，只有匹配的組件會被緩存
• exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存

2.1.0 新增

include 和 exclude 屬性允許組件有條件地緩存。二者都可以用逗號分隔字符串、正則表達式或一個數組來表示：

<!-- 逗號分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
 
<!-- 正則表達式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
 
<!-- 數組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

 

max

2.5.0 新增

最多可以緩存多少組件實例。一旦這個數字達到了，在新實例被創建之前，已緩存組件中最久沒有被訪問的實例會被銷毀掉。

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>
<keep-alive> 不會在函數式組件中正常工作，因為它們沒有緩存實例。

// 組件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

 

<keep-alive include="a">
  <component>
    <!-- name 為 a 的組件將被緩存！ -->
  </component>
</keep-alive>可以保留它的狀態或避免重新渲染

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 為 a 的組件都將被緩存！ -->
  </component>
</keep-alive>可以保留它的狀態或避免重新渲染

 

但實際項目中,需要配合vue-router共同使用.

router-view 也是一個組件，如果直接被包在 keep-alive 里面，所有路徑匹配到的視圖組件都會被緩存：

<keep-alive>
    <router-view>
        <!-- 所有路徑匹配到的視圖組件都會被緩存！ -->
    </router-view>
</keep-alive>

如果只想 router-view 里面某個組件被緩存，怎么辦？

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被緩存
    }
  }, {
    path: '/:id',
    name: 'edit',
    component: Edit,
    meta: {
      keepAlive: false // 不需要被緩存
    }
  }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 這里是會被緩存的視圖組件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 這里是不被緩存的視圖組件，比如 Edit！ -->
</router-view>

 

activated 和 deactivated（組件激活時和停用時執行）

這兩個鈎子需要配合配合<keep-alive><keep-alive/>來使用
keep-alive的作用會緩存不活動的組件實例，而不是銷毀它們。當組件在<keep-alive>內被切換，activated和deactivated這兩個生命周期鈎子函數將會被對應執行。

        注意：activated,deactivated這兩個生命周期函數一定是要在使用了keep-alive組件后才會有的，否則則不存在   當引入keep-alive的時候，頁面第一次進入，鈎子的觸發順序created-> mounted-> activated，退出時觸發deactivated。當再次進入（前進或者后退）時，只觸發activated。

用一個實例說明：

搭建了一個腳手架，新建2個子組件，1個父組件

子組件A內容

<template>
    <div>
        <div>componentA</div>
        <button @click="show=!show" >componentA事件</button>
        <div v-if='show'>componentA-2</div>
        <div v-else>componentA-1</div>
    </div>
</template>
<script>
    export default {
        name: 'componentA',
        comments: {},
        data() {
            return {
                show: true,
                circle:'生命周期'
            }
        },
        activated() {
            console.group("activated 組件激活時執行 ");
        },      
        deactivated() {
            console.group("deactivated 組件停用時執行");
        }
    }
</script>
<style>
</style>

 

子組件b內容：

<template>
    <div>
        <div>componentB</div>
    </div>
</template>
<script>
    export default {
        name: 'componentB',
        compnents: {},
        data() {
            return {}
        }
    }
</script>
<style>
</style>

父組件內容

<template>
    <div id="box">

        <button @click="active='componentA'">componentA</button>
        <button @click="active='componentB'">componentB</button>
        
        <keep-alive>
            <component :is='active' ></component>
        </keep-alive>
        
    </div>
</template>
<script>
    import Vue from 'vue'
    import componentA from '@/components/componentA'
    import componentB from '@/components/componentB'

    export default{
        
        components:{
            componentA,
            componentB
        },
        
        data(){
            return{
                active:'componentB'
            }
        }
    }
</script>
<style>
</style>

如果如下

這里看到當A組件被點擊激活時就觸發activated鈎子，點擊B組件開啟A組件關閉時deactivated鈎子就觸發執行。

這里也能看出在keep-alive 里A組件的數據也被緩存起來，第二次觸發的時候組件狀態沒有被重新改變