11. vue中的keep-alive

keep-alive是vue中的内置组件，能在组件切换的过程中将状态保留在内存中，防止重复渲染DOM

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

<keep-alive>
  <component :is="view"></component>
</keep-alive>

keep-alive可以设置以下props属性:

• include: 字符串或正则表达式。只有名称匹配的组件会被缓存

• exclude:字符串或正则表达式。名称匹配的组件都不会被缓存

    <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>

匹配首先检查组件自身的name·选项，如果name不可用，则匹配它的局部注册名称，匿名组件不能被匹配

• max: 数字。最多可以缓存多少组件实例

生命周期

设置了keep-alive的组件会多出两个生命周期钩子（activated和deactivated）

• 首次进入组件:beforeRouteEnter > beforeCreate > created > mounted > activated > ... ... > beforeRouteLeave > deactivated
• 再次进入组件：beforeRouteEnter > activated > ... ... > beforeRouteLeave > deactivated

使用场景

当我们在某些场景下不需要让页面重新加载时我们可以使用keep-alive

使用方式

在路由中设置keepalive属性判断是否需要缓存

  {
    path: '/list',
    name: 'listPage',
    component: () => import('./page/list'),
    meta: {
      keepAlive: true,
      title: '列表'
    } 
  }

  <div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>