vue前端開(kāi)發(fā)keepAlive怎么用

這篇文章給大家分享的是有關(guān)vue前端開(kāi)發(fā)keepAlive怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

前言

keep-alive 是 Vue 的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷(xiāo)毀它們。

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

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

這里的component會(huì)被緩存。

keep-avlive鉤子函數(shù)

被包含在 keep-alive 中創(chuàng)建的組件，會(huì)多出兩個(gè)生命周期的鉤子: activated與deactivated。activated：在 keep-alive 組件激活時(shí)調(diào)用，keep-alive 會(huì)將數(shù)據(jù)保留在內(nèi)存中，如果要在每次進(jìn)入頁(yè)面的時(shí)候獲取最新的數(shù)據(jù)，需要在 activated 階段獲取數(shù)據(jù)，承擔(dān)原來(lái) created 鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)
deactivated：在 keep-alive 組件停用時(shí)調(diào)用，使用了keep-alive就不會(huì)調(diào)用beforeDestory和destoryed鉤子，因?yàn)榻M件沒(méi)有被銷(xiāo)毀，而是被緩存起來(lái)了，所以deactivated鉤子可以看做是beforeDestory和destoryed的替代，如清空l(shuí)ocalStorge數(shù)據(jù)等。

keep-avlive緩存哪些組件

keep-avlive緩存哪些組件通過(guò)兩種方式，一種是通過(guò)keep-avlive組件提供的include、exclude屬性通過(guò)參數(shù)進(jìn)行匹配對(duì)應(yīng)的組件進(jìn)行緩存，另一種通過(guò)route中meta屬性的設(shè)置。
使用include、exclude屬性完成緩存組件設(shè)置

/*將緩存 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屬性的設(shè)置緩存組件，如

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不需要緩存。在使用 到中使用以下語(yǔ)句動(dòng)態(tài)完成組件緩存設(shè)置，設(shè)置代碼如下

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

示例

設(shè)置兩個(gè)組件KeepCom1，KeepCom2，KeepCom1設(shè)置緩存，KeepCom2不設(shè)置緩存。同時(shí)測(cè)試兩個(gè)鉤子函數(shù)的使用，這里使用路由meta實(shí)現(xiàn)緩存組件的設(shè)置。
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執(zhí)行')
  },
  deactivated () {
    console.log('緩存deactivated執(zhí)行')
  }
}
</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執(zhí)行')
  },
  deactivated () {
    console.log('緩存deactivated執(zhí)行')
  }
}
</script>
<style>
</style>

KeepCom1和KeepCom2代碼基本一致，就是給頁(yè)面增加結(jié)點(diǎn)。
keepAvliveTest代碼如下

<template>
  <div align="center" >
    <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組件切換，執(zhí)行后的結(jié)果為

keepcom1使用緩存，切換頁(yè)面時(shí)，上次添加三個(gè)元素還在，而且鉤子函數(shù)得到執(zhí)行。keepcom2沒(méi)有使用緩存，切換頁(yè)面時(shí)，上次添加一個(gè)元素不存在了，恢復(fù)到初始狀態(tài)。而且兩個(gè)鉤子沒(méi)有得到執(zhí)行。

感謝各位的閱讀！關(guān)于“vue前端開(kāi)發(fā)keepAlive怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！