vue前端開發keepAlive使用詳解

Posted on by

前言

keep-alive 是 Vue 的內置組件，當它包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。

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

<keep-alive>
    <component />
</keep-alive>

這裡的component會被緩存。

keep-avlive鉤子函數

被包含在 keep-alive 中創建的組件，會多出兩個生命周期的鉤子: activated與deactivated。activated：在 keep-alive 組件激活時調用，keep-alive 會將數據保留在內存中，如果要在每次進入頁面的時候獲取最新的數據，需要在 activated 階段獲取數據，承擔原來 created 鉤子函數中獲取數據的任務
deactivated：在 keep-alive 組件停用時調用，使用瞭keep-alive就不會調用beforeDestory和destoryed鉤子，因為組件沒有被銷毀，而是被緩存起來瞭，所以deactivated鉤子可以看做是beforeDestory和destoryed的替代，如清空localStorge數據等。

keep-avlive緩存哪些組件

keep-avlive緩存哪些組件通過兩種方式，一種是通過keep-avlive組件提供的include、exclude屬性通過參數進行匹配對應的組件進行緩存，另一種通過route中meta屬性的設置。
使用include、exclude屬性完成緩存組件設置

/*將緩存 name 為 test 的組件*/
<keep-alive include='test'>
      <router-view/>
</keep-alive>

使用include是將緩存name為test的組件。

<keep-alive exclude="test"> 
  <router-view/>
</keep-alive>

使用exclude，將不緩存name為test的組件。
使用route中meta屬性的設置緩存組件，如

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  // 需要緩存
      	  }
        }
      ]
    }
  ]
})

goods組件需要緩存，ratings不需要緩存。在使用 到中使用以下語句動態完成組件緩存設置，設置代碼如下

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

示例

設置兩個組件KeepCom1，KeepCom2，KeepCom1設置緩存，KeepCom2不設置緩存。同時測試兩個鉤子函數的使用，這裡使用路由meta實現緩存組件的設置。
KeepCom1代碼如下：

<template>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">添加子元素</button>
  </div>
</template>
<script>
export default {
  name: 'keepCom1',
  methods: {
    add () {
      let ul = document.getElementsByClassName('content')[0]
      let li = document.createElement('li')
      li.innerHTML = '我是添加的元素'
      ul.appendChild(li)
    }
  },
  activated () {
    console.log('緩存activated執行')
  },
  deactivated () {
    console.log('緩存deactivated執行')
  }
}
</script>
<style>
</style>

KeepCom2代碼如下：

<template>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">添加子元素</button>
  </div>
</template>

<script>
export default {
  name: 'keepCom2',
  methods: {
    add () {
      let ul = document.getElementsByClassName('content')[0]
      let li = document.createElement('li')
      li.innerHTML = '我是添加的元素'
      ul.appendChild(li)
    }
  },
  activated () {
    console.log('緩存activated執行')
  },
  deactivated () {
    console.log('緩存deactivated執行')
  }
}
</script>
<style>
</style>

KeepCom1和KeepCom2代碼基本一致，就是給頁面增加結點。
keepAvliveTest代碼如下

<template>
  <div align="center" style="margin-top: 20px;">
    <router-link to="/keepAvliveTest/keepcom1">使用緩存</router-link>
    <router-link to="/keepAvliveTest/keepcom2">不使用緩存</router-link>
    <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: 'keepAvliveTest'
}
</script>
<style>
</style>

完成keepcom1和keepcom2組件切換，執行後的結果為

在這裡插入圖片描述

keepcom1使用緩存，切換頁面時，上次添加三個元素還在，而且鉤子函數得到執行。keepcom2沒有使用緩存，切換頁面時，上次添加一個元素不存在瞭，恢復到初始狀態。而且兩個鉤子沒有得到執行。

小結及註意事項

在設置需要緩存的頁面時，推薦使用router中meta標簽，這樣代碼的耦合度較低。keep-alive 先匹配被包含組件的 name 字段，如果 name 不可用，則匹配當前組件 components 配置中的註冊名稱。包含在 keep-alive 中，但符合 exclude ，不會調用activated和 deactivated

以上就是vue前端開發keepAlive使用詳解的詳細內容，更多關於vue前端的資料請關註WalkonNet其它相關文章！

推薦閱讀：