Vue.js（23）之 keepAlive和activated

閱讀：

vue中前進刷新、後退緩存用戶瀏覽數據和瀏覽位置的實踐

keep-alive 組件級緩存

keep-alive

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷燬它們。

<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出如今父組件鏈中，不會渲染到DOM樹中。

它的做用是在內存中緩存組件（不讓組件銷燬），等到下次渲染是，還會保留在原來額狀態。

當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。

使用：

<keep-alive include="mainList">
    <router-view class="child-view"></router-view>
</keep-alive>

keep-alive的屬性：

include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
include 和 exclude 屬性容許組件有條件地緩存。兩者均可以用逗號分隔字符串、正則表達式或一個數組來表示
max - 數字。最多能夠緩存多少組件實例，一旦這個數字達到了，在新實例被建立以前，已緩存組件中最久沒有被訪問的實例會被銷燬掉。

組件匹配首先檢查組件自身的 name 選項（不是route的name），若是 name 選項不可用，則匹配它的局部註冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

keep-alive的鉤子函數：

activated 和 deactivate 生命週期鉤子:
設置了keepAlive緩存的組件：
activated deactivate 只要頁面切換加載組件就會執行一次
第一次進入：beforeRouterEnter -> created -> … ->activated-> … ->deactivated
後續進入時：beforeRouterEnter -> activated -> deactivated

小場景

結合 router 緩存部分組件

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive></router-view>

route元信息：

routers: [{
  path: '/',
  name: 'Home',
  meta: {
    keepAlive: false // 不須要緩存
  }
},{
  path: '/page',
  name: 'Page',
  meta: {
    keepAlive: true  // 須要緩存
  }
},]

列表和詳情頁

需求：列表頁面須要緩存，上拉加載更多，點擊進入詳情頁；此時詳情頁回退到列表頁，須要記錄上次滾動的距離。

route：

routers = [
  {
    path: '/',
    name: 'home',
    component: Home,
    redirect: { path: '/' },
    children: [{
      path: '/',
      name: 'index',
      component: List, // 列表頁
      meta: { 
          isUseCache: false,// 是否須要緩存
          keepAlive: true // 緩存
      } 
    }, {
      path: '/detail1',
      name: 'detail1',
      component: Detail1, // 詳情頁
      meta: { keepAlive: false } // 不緩存
    }]
  }
]

在列表頁的 activated beforeRouteLeave 鉤子中：

activated() {
    // isUseCache爲false，從新刷新獲取數據
    if(!this.$route.meta.isUseCache){            
        this.list = []; // 清空原有數據
        this.onLoad(); // 這是咱們獲取數據的函數
    }
},

beforeRouteLeave (to, from, next) {    
    // 若是去詳情頁，就緩存 列表頁面數據
    if (to.name == 'Detail') {
        from.meta.isUseCache = true;    
    }        
    next();
},

如今，從詳情頁面返回列表頁面就會存在緩存了。

那麼若是在詳情頁面的訂單狀態發生改變，那麼返回列表頁面就須要刷新了。

那麼詳情頁面的路由能夠這樣：

data() {    
    return {
        isDel: false  // 是否進行了刪除訂單的操做       
    }
},
beforeRouteLeave (to, from, next) {        
    if (to.name == 'List') {
        // 根據是否刪除了訂單的狀態，進行判斷list是否須要使用緩存數據
        to.meta.isUseCache = !this.isDel;               
    }        
    next()
},
methods: {        
    deleteOrder () {       
        // 刪除訂單的操做 code ...
        this.isDel = true;
        this.$router.go(-1)
    }
}