目錄

• 前言
• keep-avlive鉤子函式
• keep-avlive快取哪些元件
• 小結及注意事項

前言

keep-alive 是 的內建元件，當它包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。

在元件切換過程中將狀態保留在記憶體中，防止重複渲染DOM，減少載入時間及效能消耗，提高使用者體驗性。使用方式為

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

這裡的component會被快取。

keep-avlive鉤子函式

被包含在 keep-alive 中建立的元件，會多出兩個生命週期的鉤子: activated與deactivated。activated：在 keep-alive 元件啟用時呼叫，keep-alive 會將資料保留在記憶體中，如果要在每次進入頁面的時候獲取最新的資料，需要在 activated 階段獲取資料，承擔原來 created 鉤子函式中獲取資料的任務

keep-avlive快取哪些元件

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

/*將快取 name 為 test 的元件*/
<keep-alive include='test'>
      <rwww.cppcns.comouter-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">
    <www.cppcns.comul 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 = '我是新增的元素'
  BoiID    ul.appendChild(li)
    }
  },deactivated () {
    console.log('快取deactivated執行')
  }
}
</script>
<style>
</style>

KeepCom1和KeepCom2程式碼基本一致，就BoiID是給頁面增加結點。
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前端的資料請關注我們其它相關文章！