keep-alive 是 vue 中内置组件，用 keep-alive 包裹的组件，用来缓存和保留当时状态的组件实例，而不是销毁它们。

主要是保存当时的组件状态和避免重复创建，避免重复渲染导致的性能问题。

特点

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

使用场景

官方例子：

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

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

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

匿名组件不能被匹配。

需要注意的地方

关于生命周期

当引入 keep-alive 的时候， 页面第一次进入，生命周期钩子的触发顺序：created --- mounted----activated;
退出时触发 deactivated；
当再次进入的时候，只触发 activated。

返回 dom 不让其重新刷新，只执行一次的放在 mounted 中；
组件每次进去执行的方法放在 activated 中。

关于注册组件

在 keep-alive 中直接添加 include，cachedViews----Array 类型：包含 vue 文件的组件 name 都将被缓存起来；反之 exclude 则是不会被缓存；

exclude 的优先级大于 include。
也就是说：当 include 和 exclude 同时存在的时候，exclude 会生效，include 不会生效的。

● 工作中常见页面布局的n种实现方法

● 三栏响应式布局(左右固宽中间自适应)的5种方法

● 两栏自适应布局的n种实现方法汇总

● 工作中常见的两栏布局案例及分析

● 垂直居中布局的一百种实现方式

● 常用九宫格布局的几大方法汇总

● 为什么操作DOM会影响WEB应用的性能？

● 移动端滚动穿透的6种解决方案

● Vue + TypeScript 踩坑总结