keep-alive 组件缓存

一、什么是 keep-alive

在平常开发中， 有部分组件没有必要多次初始化，这时我们需要将组件进行持久化，是组件的状态维持不变，也不会重新进行初始化组件。例如 表单组件 我们通常是希望用户填写以后即使跳转以后重新回到原来的页面，已经填写的表单内容依旧存在，不需要重新进行填写。

keep-alive 是 vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。也就是所谓的组件缓存。

二、基本用法

<keep-alive>
    <component />
</keep-alive>

被 keep-alive 包含的组件不会被再次初始化，也就意味着不会重新走生命周期函数。

如果希望被缓存的组件能够再次进行渲染：

被包含在 keep-alive 中的组件，会多出两个生命周期： activated 与 deactivated 

• activated 当 keep-alive 包含的组件再次渲染时触发
• deactivated 当 keep-alive 包含的组件销毁的时候触发

 keep-alive 是一个抽象的组件，缓存的组件不会被 mounted（挂载），为此提供 activated 和 deactvated 钩子函数。

在 2.1.0 版本后 keep-alive 新加入两个属性：include (包含的组件缓存) 与 exclude（包含的组件不缓存，优先级大于include）。

三、参数理解 

keep-alive 可以接收3个属性做为参数进行匹配对应的组件进行缓存:

• include 包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)

• exclude 排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)

• max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数，超出最大缓存数时会删除第一个缓存的组件。)

注：当使用正则表达式或者数组时，一定要使用 v-bind

代码示例

// 只缓存组件name为a或者b的组件
<keep-alive include="a,b"> 
  <component />
</keep-alive>

// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>

// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>

// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>

四、配合 router 使用

router-view 也是一个组件，如果直接被包在 keep-alive 里面，那么所有路径匹配到的视图组件都会被缓存：

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存 -->
    </router-view>
</keep-alive>

如果只想要 router-view 里面的某个组件被缓存，怎么办？

• 使用 include/exclude
• 使用 meta 属性

1.使用 include (exlude 例子类似) 

// 只有路径匹配到的 name 为 a 的组件会被缓存
<keep-alive include="a" >
    <router-view></router-view>
</keep-alive>

2. 使用 meta 属性

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不会被缓存的视图组件，比如 Profile！ -->
</router-view>