keep-alive緩存優(yōu)化實踐總結

keep-alive

<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態(tài)保留在內存中，防止重復渲染DOM。
<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

具體應用場景

搜索列表頁==>詳情頁==>返回列表頁，保存上次已經加載出來的數據和自動還原上次的瀏覽位置

keep-alive鉤子函數

?先簡單說一下和緩存相關的vue鉤子函數。
?對于設置了keepAlive緩存的組件：
??第一次進入：beforeRouterEnter->created->activated->deactivated
??后續(xù)進入時：beforeRouterEnter ->activated->deactivated
可以看出，只有第一次進入該組件時，才會走created鉤子，而需要緩存的組件中activated是每次都會走的鉤子函數。所以，為了避免重復請求，我們要在activated這個鉤子里面去判斷，當前組件是需要使用緩存的數據還是重新刷新獲取數據。

prop:

include: 字符串或正則表達式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

常見用法：

// 組件
export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

<keep-alive include="test-keep-alive">
  <!-- 將緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 將緩存name為a或者b的組件，結合動態(tài)組件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正則表達式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 動態(tài)判斷 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 將不緩存name為test-keep-alive的組件 -->
  <component></component>
</keep-alive>

結合router實現步驟

• 保存上次已經加載出來的數據

需要在<button>router</button>中設置router的元信息meta，（scrollTop屬性的設置為了保存瀏覽位置，后面再說）：

    export const constantRouterMap = 
    [{
        path: 'index',
        name: 'list',
        hidden: true,
        meta: { title: '客戶管理', keepAlive: true, scrollTop: 0 },
        component: () => import('@/views/List')
      },
      {
        path: 'clientInfo',
        name: 'clientInfo',
        hidden: true,
        component: () => import('@/views/clientInfo/index'),
        meta: { title: '客戶信息', icon: 'icon-yejiguanli', keepAlive: true }
    }]
    export default new Router({
      mode: 'history',
      routes: constantRouterMap,
      scrollBehavior: () => ({ y: 0 })
    })

在頁面中的路由容器里設置keep-alive標簽

<template>
  <keep-alive v-if="$route.meta.keepAlive">
    <router-view/>
  </keep-alive>
  <router-view v-else-if="!$route.meta.keepAlive"/>
</template>
<script>
export default {
  name: 'List'
}
</script>

• 保留頁面滾動位置
  首次進入頁面時，scrollTop = 0，如上面所說，在設置keep-alive的頁面，一定會走activated方法，當頁面中存在滾動條，路由跳轉的兩個場景：
  • 離開列表頁進入詳情頁（修改本頁面的路由元信息scrollTop為當前滾動位置）
  • 離開列表頁進入其他平級頁面（修改本頁面的路由元信息scrollTop為0）

const myMixin = {
  activated() {
    document.querySelector('#app').scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    if (to.name.includes('clientInfo')) {
      const scrollTop = document.querySelector('#app').scrollTop
      from.meta.scrollTop = scrollTop
    } else {
      from.meta.scrollTop = 0
    }
    next()
  }
}

頁面中列表較多的情況下，我們把activated方法和beforeRouteLeave方法抽離出來復用，頁面中引用進來即可：

import myMixin from '@/utils/mixin.js'
export default {
  name: 'List',
  mixins: [myMixin]
}

暫且總結這么多，希望對大家有幫助！