Vue中keep-alive的使用及詳解

概念

    keep-alive 是 Vue 的內置組件，當它包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。和 transition 相似，keep-alive 是一個抽象組件：它自身不會渲染成一個 DOM 元素，也不會出現在父組件鏈中。

作用

    在組件切換過程中將狀態保留在內存中，防止重複渲染DOM，減少加載時間及性能消耗，提高用戶體驗性

原理

    在 created 函數調用時將需要緩存的 VNode 節點保存在 this.cache 中／在 render（頁面渲染） 時，如果 VNode 的 name 符合緩存條件（可以用 include 以及 exclude 控制），則會從 this.cache 中取出之前緩存的 VNode 實例進行渲染。

    VNode：虛擬DOM，其實就是一個JS對象

Props

• include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
• exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
• max - 數字。最多可以緩存多少組件實例。

生命週期函數

  1. activated

      在 keep-alive 組件激活時調用
      該鉤子函數在服務器端渲染期間不被調用

  2. deactivated

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

    被包含在 keep-alive 中創建的組件，會多出兩個生命週期的鉤子: activated 與 deactivated

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

    注意： 只有組件被 keep-alive 包裹時，這兩個生命週期函數纔會被調用，如果作爲正常組件使用，是不會被調用的，以及在 2.1.0 版本之後，使用 exclude 排除之後，就算被包裹在 keep-alive 中，這兩個鉤子函數依然不會被調用！另外，在服務端渲染時，此鉤子函數也不會被調用。

緩存所有頁面

1. 在 App.vue 裏面

<template>
  <div id="app">
  	<keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

根據條件緩存頁面

1. 在 App.vue 裏面

<template>
  <div id="app">
  	// 1. 將緩存 name 爲 test 的組件
  	<keep-alive include='test'>
      <router-view/>
    </keep-alive>
	
	// 2. 將緩存 name 爲 a 或者 b 的組件，結合動態組件使用
	<keep-alive include='a,b'>
  	  <router-view/>
	</keep-alive>
	
	// 3. 使用正則表達式，需使用 v-bind
	<keep-alive :include='/a|b/'>
  	  <router-view/>
	</keep-alive>	
	
	// 5.動態判斷
	<keep-alive :include='includedComponents'>
  	  <router-view/>
	</keep-alive>
	
	// 5. 將不緩存 name 爲 test 的組件
	<keep-alive exclude='test'>
  	  <router-view/>
	</keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

結合Router，緩存部分頁面

1. 在 router 目錄下的 index.js 文件裏

import Vue from 'vue'
import Router from 'vue-router'
const Home = resolve => require(['@/components/home/home'], resolve)
const Goods = resolve => require(['@/components/home/goods'], resolve)
const Ratings = resolve => require(['@/components/home/ratings'], resolve)
const Seller = resolve => require(['@/components/home/seller'], resolve)

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect: 'goods',
      children: [
        {
          path: 'goods',
          name: 'goods',
          component: Goods,
          meta: {
        	keepAlive: false // 不需要緩存
      	  }
        },
        {
          path: 'ratings',
          name: 'ratings',
          component: Ratings,
          meta: {
        	keepAlive: true  // 需要緩存
      	  }
        },
        {
          path: 'seller',
          name: 'seller',
          component: Seller,
          meta: {
        	keepAlive: true  // 需要緩存
      	  }
        }
      ]
    }
  ]
})

2. 在 App.vue 裏面

<template>
  <div id="app">
  	<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>