keep-alive 是Vue內(nèi)置的組件之一， 主要用于保留組件狀態(tài)或避免重新渲染。

作用

   在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM，減少加載時間及性能消耗，提高用戶體驗(yàn)。

一、keep-alive 用法

< keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實(shí)例，而不是銷毀它們。
和 < transition> 相似，< keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。

當(dāng)組件在 < keep-alive> 內(nèi)被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應(yīng)執(zhí)行。

Props：

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

• include & exclude

如果你只想緩存部分組件的狀態(tài)，可以使用include屬性。

如果你想除掉一些組件，其他的才被緩存，可以使用exlucde屬性。

• max
  

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

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

使用示例：

1.緩存所有頁面：

<keep-alive>
    <router-view></router-view>
    <!--這里是會被緩存的組件-->
</keep-alive>

2.根據(jù)條件緩存部分頁面

(更多用法見官網(wǎng)API)

<template>
  <div id="app">
  	// 1. 將緩存 name 為 newsList 或者 productList 的組件
      <keep-alive include='newsList,productList'>
         <router-view/>
      </keep-alive>
	
	// 2. 將不緩存 name 為 test 的組件
	<keep-alive exclude='test'>
  	  <router-view/>
	</keep-alive>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

注意：

還有一步，你必須在需要被緩存狀態(tài)的組件的script部分，給組件添加一個name屬性。 如果沒有使用keep-alive緩存狀態(tài)的組件，可以不寫name屬性。但是如果使用了keep-alive緩存該組件狀態(tài)，則此組件必須有這個屬性。并且，這個屬性的值，還必須跟標(biāo)簽中include屬性的值完全一致，包括大小寫。 以productList.vue組件為例　

<template>
    <!-- 這里是productList組件的html結(jié)構(gòu)部分 -->
</template>
<script>
export default {
    name: "productList",  //如果使用了keep-alive緩存該組件狀態(tài)，則此組件必須有這個屬性。
    data(){
        return {}
    }
</script>

3.結(jié)合vue-router，緩存部分頁面

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'products',
          name: 'products',
          component: products,
          meta: {
        	keepAlive: true // 需要緩存
      	  }
        },
        {
          path: 'newsDetails',
          name: 'newsDetails',
          component: newsDetails,
          meta: {
        	keepAlive: false  // 不需要緩存
      	  }
        }
      ]
    }
  ]
})

在 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>

二、keep-alive 生命周期

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

1. activated

      在 keep-alive 組件激活時調(diào)用。

在組件第一次渲染時會被調(diào)用，之后在每次緩存組件被激活時調(diào)用。

第一次進(jìn)入緩存路由/組件，在mounted后面，beforeRouteEnter守衛(wèi)傳給 next 的回調(diào)函數(shù)之前調(diào)用：

頁面第一次進(jìn)入的時候，鉤子觸發(fā)的順序是created->mounted->activated

因?yàn)榻M件被緩存了，再次進(jìn)入緩存路由/組件時，不會觸發(fā)這些鉤子：

  beforeCreate created beforeMount mounted 都不會觸發(fā)。

2. deactivated

      在 keep-alive 組件停用(離開路由)時調(diào)用。       

使用了keep-alive就不會調(diào)用beforeDestroy(組件銷毀前鉤子)和destroyed(組件銷毀)，因?yàn)榻M件沒被銷毀，被緩存起來了。

這個鉤子可以看作beforeDestroy的替代，如果你緩存了組件，要在組件銷毀的的時候做一些事情，你可以放在這個鉤子里。

  注意：

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

2、只有組件被 keep-alive 包裹時，這兩個生命周期函數(shù)才會被調(diào)用，如果作為正常組件使用，是不會被調(diào)用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，這兩個鉤子函數(shù)依然不會被調(diào)用！

3、以上這兩個鉤子函數(shù)在服務(wù)器端渲染期間不被調(diào)用。

參考官方文檔：cn.vuejs.org/v2/api/#kee…

以上就是Vue 內(nèi)置組件keep-alive的使用示例的詳細(xì)內(nèi)容，更多關(guān)于Vue 內(nèi)置組件keep-alive的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論