vue2.0 keep-alive最佳實踐

1.基本用法

vue2.0提供了一個keep-alive組件
用來緩存組件,避免多次加載相應的組件,減少性能消耗

<keep-alive>
    <component>
          <!-- 組件將被緩存 -->
    </component>
</keep-alive>    

 

有時候 可能需要緩存整個站點的所有頁面,而頁面一般一進去都要觸發請求的
在使用keep-alive的情況下

<keep-alive><router-view></router-view></keep-alive>

將首次觸發請求寫在created鈎子函數中,就能實現緩存,
比如列表頁,去了詳情頁 回來,還是在原來的頁面。

 

2.緩存部分頁面或者組件

(1)使用router. meta屬性

// 這是目前用的比較多的方式
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

router設置

... 
  routes: [
    { path: '/', redirect: '/index',  component: Index, meta: { keepAlive: true }},
    {
      path: '/common',
      component: TestParent,
      children: [
        { path: '/test2', component: Test2, meta: { keepAlive: true } } 
      ]
    }
    ....
    // 表示index和test2都使用keep-alive

 

(2).使用新增屬性inlcude/exclude

 2.1.0后提供了include/exclude兩個屬性 可以針對性緩存相應的組件

 

<!-- comma-delimited string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- regex (use v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

//其中a,b是組件的name

 

注意:這種方法都是預先知道組件的名稱的

 

(3)動態判斷

<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

includedComponents動態設置即可

 

如果只想 router-view 里面某個組件被緩存，怎么辦？

• 使用 include/exclude
• 增加 router.meta 屬性

 

使用 include/exclude

 

// 組件 a
export default {
  name: 'a',
  data () {
    return {}
  }
}

<keep-alive include="a">
    <router-view>
        <!-- 只有路徑匹配到的視圖 a 組件會被緩存！ -->
    </router-view>
</keep-alive>

exclude 例子類似

缺點：需要知道組件的 name，項目復雜的時候不是很好的選擇

 

【加鹽】使用 router.meta 拓展

假設這里有 3 個路由： A、B、C。

需求：

• • 默認顯示 A
  • B 跳到 A，A 不刷新
  • C 跳到 A，A 刷新

實現方式：

在 A 路由里面設置 meta 屬性：

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被緩存
    }
}

在 B 組件里面設置 beforeRouteLeave：

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 設置下一個路由的 meta
        to.meta.keepAlive = true;  // 讓 A 緩存，即不刷新
        next();
    }
};

在 C 組件里面設置 beforeRouteLeave：

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 設置下一個路由的 meta
        to.meta.keepAlive = false; // 讓 A 不緩存，即刷新
        next();
    }
};

 

 

這樣便能實現 B 回到 A，A 不刷新；而 C 回到 A 則刷新。

 

總結

路由大法不錯，不需要關心哪個頁面跳轉過來的，只要 router.go(-1) 就能回去，不需要額外參數。

然而在非單頁應用的時候，keep-alive 並不能有效的緩存了= =

 

 

 

https://segmentfault.com/a/1190000008123035