Vue开发收集（keep-alive）

       在使用vue做开发的时候，我们有时会遇到需要保留组件状态的情况，防止页面重新绘制，这时候就需要使用keep-alive组件，该组件属于vue的内置组件，同transition一样，他本身不会渲染。 

       当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行，也就是说使用了keep-alive后组件被激活（被切换到的时候）会遇到钩子函数activated,当被切换掉时候会执行deactivated钩子函数。

1.用在组件上

在官网上有这样的一个例子：

上边的例子在使用了<keep-alive></keep-alive>后，在切换tab后cat ipsum也不会重新渲染，他会被保存到内存中，下次切换回来直接读取。

2.结合v-router,缓存页面

使用v-router的meta属性可以做到，如下的代码:

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

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

复制代码

这样处理后的页面跳转会根据meta.live这个属性判断是否缓存

3.props,实现有条件的缓存

<keep-alive>有两个重要的属性 ：

1.include： - 字符串或正则表达式。只有匹配的组件会被缓存

//字符串
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
//正则,必须使用v-bind:include
<keep-alive v-bind:include="/a|b/"> 
 <component :is="view"></component>
</keep-alive>
复制代码

2.

 exinclude

： - 字符串或正则表达式。排除不会缓存的组件