# 前言

Vue 内置了 KeepAlive 组件，帮助我们实现缓存多个组件实例切换时，完成对卸载组件实例的缓存，从而使得组件实例在来会切换时不会被重复创建，又是一个空间换时间的典型例子。在介绍源码之前，我们先来了解一下 KeppAlive 使用的基础示例：

html
复制代码<template>
  <KeepAlive>
    <component :is="activeComponent" />
  </KeepAlive>
</template>

当动态组件在随着 activeComponent 变化时，如果没有 KeepAlive 做缓存，那么组件在来回切换时就会进行重复的实例化，这里就是通过 KeepAlive 实现了对不活跃组件的缓存。

这里需要思考几个问题：

1. 组件是如何被缓存的，以及是如何被重新激活的？
2. 既然缓存可以提高组件渲染的性能，那么是不是缓存的越多越好呢？
3. 如果不是越多越好，那么如何合理的丢弃多余的缓存呢？

接下来我们通过对源码的分析，一步步找到答案。先找到定义 KeppAlive 组件的地方，然后看一下其大致内容：

const KeepAliveImpl = {
  // 组件名称
  name: `KeepAlive`,
  // 区别于其他组件的标记
  __isKeepAlive: true,
  // 组件的 props 定义
  props: {
    include: [String, RegExp, Array],
    exclude: [String, RegExp, Array],
    max: [String, Number]
  },
  setup(props, {slots}) {
    // ...
    // setup 返回一个函数
    return () => {
      // ...
    }
  }

可以看到，KeepAlive 组件中，通过 __isKeepAlive 属性来完成对这个内置组件的特殊标记，这样外部可以通过 isKeepAlive 函数来做区分：

const isKeepAlive = vnode => vnode.type.__isKeepAlive

紧接着定义了 KeepAlive 的一些 props：

1. include 表示包含哪些组件可被缓存
2. exclude 表示排除那些组件
3. max 则表示最大的缓存数

后面我们将可以详细的看到这些 props 是如何被发挥作用的。

最后实现了一个 setup 函数，该函数返回了一个函数，我们前面提到 setup 返回函数的话，那么这个函数将会被当做节点 render 函数。了解了 KeepAlive