Vue 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.mate属性：

<！--这是目前用的比较多的方式 -->
<keep-alive>
    <router-view v-if="!$route.meta.notKeepAlive"></router-view>
</keep-alive>
<router-view v-if="$route.meta.notKeepAlive"></router-view>

　　　　router设置：

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

　　(2)使用新增属性inlcude/exclude：　　

　　prop:

• include: 字符串或正则表达式。只有匹配的组件会被缓存。
• exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

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

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>　

　注意:这种方法都是预先知道组件的名称的

（3）使用$route.meta的keepAlive属性：

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

　　需要在router中设置router的元信息meta：　

//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

　(4)动态判断（实例）

<keep-alive :include="cache_page.toString()">
  <router-view></router-view>
</keep-alive>

data() {
    return {
        cache_page: []
    }
},
watch: {
    $route(to, from){
        if(to.meta.modules !== from.meta.modules){
            this.cache_page = [];
        }
        if('modules' in to.meta){
            this.cache_page.push(to.name);
        }
    }
}

router配置：

//...router.js

export default new Router({
  routes:  [{
        path: '/aaa',
        name: 'aaa',
        component: aaa,
        meta: {
            modules: 'aaa'    //需要被缓存
        }
    },
    {
        path: '/bbb',
        name: 'bbb',
        component: bbb,
        meta: {
            modules: 'bbb'    //需要被缓存
        }
    },
    {
        path: '/ccc',
        name: 'ccc',
        component: ccc,
        meta: {
            modules: 'ccc'    //不要缓存
        }
    },
    {
        path: '/ddd',
        name: 'ddd',
        component: ddd,
        meta: {
            modules: 'ccc'    //不要缓存
        }
    }]
});

　　用router配置的meta.modules去判断，如果meta.modules不同，则push到数组，页面将会被缓存。