vue中的keep-alive的用法

基本用法介绍

Vue不同组件在进行切换时，组件会被重复销毁，重新渲染。使用 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<template>
    <div>
        <button @click='show = !show'>切换显示</button>
        <MyA v-if='show'>我是A组件</MyA>
        <MyB v-else>我是B组件</MyB>
    </div>
</template>

根据上述代码，默认渲染A组件，不渲染B组件。点击按钮时，销毁A组件，渲染B组件。再次点击按钮时，销毁B组件，渲染A组件。

<template>
    <div>
      <button @click='show = !show'>切换显示</button>
      <keep-alive>
        <MyA v-if='show'>我是A组件</MyA>
        <MyB v-else>我是B组件</MyB>
      </keep-alive>
    </div>
</template>

添加后，默认渲染A组件，不渲染B组件。点击按钮时，A组件被缓存，渲染B组件。再次单击按钮时，缓存B组件，显示A组件。可见，该方式可节省性能。如，A组件和B组件均存在大量HTTP请求，如果重复切换按钮，请求也会重复进行，对网页的性能耗费较大；但是如果使用keep-alive进行缓存，相应的请求也都只会请求一次。

可选参数

include

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

exclude

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

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<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 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

max

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

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

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

用于缓存路由组件

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

如果只需要其中一个组件缓存，比如cofather组件缓存时，我们就需要keep-alive的两个属性了

<keep-alive include="cofather">
   <router-view/>
</keep-alive>

我们还可以利用路由中的meta属性来控制

{
    path: '/cofather',
    name: 'cofather',
    meta:{
      keepAlive:true
    },
    component: () => import('../views/Cofather.vue')
  },

将cofather的路由规则中的meta添加keepAlive属性为true，也就是当前路由组件要进行缓存

keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些

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