Keep-live

Keep-alive简介

keep 是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
用法也很简单

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

props

• include-字符串或正则表达式，只会匹配的组件会被渲染
• exclude-字符串或正则表达式，任何匹配的组件都不会被缓存

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

<keep-alive include="a">
  <component>
    <!-- name 为 a 的组件将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

<keep-alive exclude="a">
  <component>
    <!-- 除了 name 为 a 的组件都将被缓存！ -->
  </component>
</keep-alive>可以保留它的状态或避免重新渲染

用法：
缓存动态组件：
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

缓存路由组件：

使用keep-alive可以将所有路径匹配到的路由组件都缓存起来，包括路由组件里面的组件，keep-alive大多数使用场景就是这种。

方式一：vue文件中
<keep-alive>
    <router-view></router-view>
</keep-alive>
 
方式二：router.js中
{
        path: '/as',
        icon: 'earth',
        title: '赠品管理',
        name: 'as',
        component: Main,
        children: [{
            path: 'a',
            title: '赠品管理',
            name: 'a',
            component: () =>
                import ('@/views/a/index.vue'),
            meta:{
                keepAlive:true
            }
        }]
    }

缓存你想要缓存的：

使用v-if通过路由元信息判断缓存哪些路由

  <keep-alive>
     <router-view v-if="$route.meta.keepAlive">
         <!--这里是会被缓存的路由-->
     </router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive">
     <!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
 </router-view>
 //router配置
 new Router({
   routes: [
     {
       path: '/',
       name: 'home',
       component: Home,
       meta: {
         keepAlive: true // 需要被缓存
       }
     },
     {
       path: '/edit',
       name: 'edit',
       component: Edit,
       meta: {
         keepAlive: false // 不需要被缓存
       }
     }
   ]
 });

生命周期钩子：

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated

activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用

deactivated：组件被停用(离开路由)时调用

缓存组件的使用方式：

  <!-- 逗号分隔字符串 -->
    <keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive>

但更多场景中，我们会使用keep-alive来缓存路由：

<keep-alive include='a'>
    <router-view></router-view>
</keep-alive>

注：当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated。