从源码角度来回答keep-alive组件的缓存原理

今天开门见山地聊一下面试中被问到的一个问题：keep-alive组件的缓存原理。

 

01 官方API介绍和用法

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

官网的例子是tab切换保存了用户的操作，实际中还可能遇到从列表页跳转去了详情页，再跳转回列表页需要保存用户进行过的筛选操作，这就需要用到<keep-alive>，这样也能避免重新渲染，提高页面性能。

用法及props的讲解

// keep-alive组件搭配动态组件的用法，还要其他的用法参见官网<keep-alive  include="['componentNameA', 'componentNameB']"  exclude="'componentNameC'"  :max="10">  <component :is="view"></component></keep-alive>

include - 字符串或正则表达式或数组，name匹配上的组件会被缓存

exclude - 字符串或正则表达式或数组，name匹配上的组件都不会被缓存

max - 字符串或数字，缓存组件实例的最大数，最久没有被访问的实例会被销毁掉

注意：

• <keep-alive>只渲染其直系的一个组件，因此若在<keep-alive> 中用v-for，则其不会工作，若多条件判断有多个符合条件也同理不工作。

• include 和 exclude 匹配时，首先检查组件的name选项，若name选项不可用，则匹配它的局部注册名称 (即父组件components