面试官：介绍一下 keep-alive？

keep-alive 是 vue 内置的组件，用 keep-alive 包裹组件时，会缓存不活动的组件实例，而不是销毁他们。主要用于保存组件状态或避免重复创建。避免重复渲染导致的性能问题。

特点

它是一个抽象组件，自身不会渲染一个 dom 元素，也不会出现在组件的父组件链中。
当组件在 keep-alive 内被切换，组件的 activated 和 deactivated 这两个生命周期钩子函数会被执行。组件一旦被缓存，再次渲染就不会执行 created、mounted 生命周期钩子函数。
要求同时只有一个子组件被渲染。
不会在函数式组件中正常工作，因为它们没有缓存实例。

使用场景

// 1 动态组件（所谓动态组件就是让多个组件使用同一个挂载点，并动态切换。）
<keep-alive>
    <component is="currentComponent"></component>
</keep-alive>
// 2 多个条件判断的子组件
<keep-alive>
    <comp-a v-if="true"></comp-a>
    <comp-b v-else></comp-b>
</keep-alive>
// 3 transition
<transition>
    <keep-alive>
        <component is="currentComponent"></component>
    </keep-alive>
</transition>
// 4 结合vue-router
<keep-alive>
  <router-view></router-view>
</keep-alive>

props

include 白名单只有名称匹配的组件会被缓存
exclude 黑名单任何匹配的组件都不会被缓存
max 最多缓存多少个实例，一旦达到这个数字，新实例被创建之前，会销毁已缓存组件中最久没有被访问的实例。(了解一下LRU 算法）

注意：include 和 exclude 首先检查组件的 name 属性，如果 name 不可用，则匹配局部注册名称。匿名组件不能被匹配。

关键词

缓存不让组件销毁

keep-alive 实现原理

组件通过插槽，获取第一个子节点。根据 include、exclude 判断是否需要缓存，通过组件的 key，判断是否命中缓存。利用 LRU 算法，更新缓存以及对应的 keys 数组。根据 max 控制缓存的最大组件数量。

业务需求

跳转到详情页面时，需要保持列表页的滚动条的深度及筛选条件等，等返回的时候依然在这个位置，这样可以提高用户体验。在 Vue 中，对于这种“页面缓存”的需求，我们可以使用 keep-alive 组件来解决这个需求。
在最近的开发中，设计有 A、B、C 三个页面，试想这样一个场景需求：

离开 B 页面进入 C 页面，缓存 B 页面数据（keepAlive: true）
离开 B 页面进入 A 页面，不缓存 B 页面数据（keepAlive: false)

参考：