Vue2.0源码解析 - 知其然知其所以然之keep-alive

前言

【一天一个小知识，每天进步一点点】小伙伴们大家好，今天将要给大家分享是Vue中关于组件缓存的一个内置组件 - keep-alive

不知道小伙伴们有没有遇到这样一种情况，在我们的项目开发中，有时候会利用弹出框做一些表单提交的操作，但有时候填着填着鼠标不小心点了一下弹出框以外空白的地方，导致弹出框关闭了，当再次重新打开弹出框的时候，发现之前录的信息全都不见了，是不是瞬间就不淡定了呢。这个时候我们的内置组件keep-alive就会派上用场了。接下来我们就一起分析下keep-alive是干什么用的，它的实现原理又是怎样的。

keep-alive是什么

keep-alive是一个内置的抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive主要用于保留组件状态或避免重新渲染。也就是说如果一个组件A被keep-alive包裹后，当我切换的组件B后组件A不会被销毁而是会被缓存起来，当我们再次切换回组件A时，组件A中的数据依然还还的不会被重新初始化。

keep-alive的用法

keep-alive的用法也非常简单， 它可以用来包裹动态组件，也可以包裹一个router-view。

<!--包裹动态组件-->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!--包裹router-view-->
<keep-alive>
  <router-view></router-view>
</keep-alive>

以上是keep-alive最基本的用法。其实keep-alive还为我们提供3个属性：include、exclude和max

• include： 字符串、数组或正则表达式。只有名称匹配的组件会被缓存。
• exclude： 字符串、数组或正则表达式。任何名称匹配的组件都不会被缓存。
• max： 数字，最多可以缓存多少组件实例。

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
匹配时首先会检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

• 只有当view是a或b时才会被缓存

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
 <component :is="view"></component>
</keep-alive>

• 组件a和b都不会被缓存

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

max：最多可以缓存多少组件实例。如果指定了max prop， 一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。用法如下：

<keep-alive :max="10">
 <component :is="view"></component>
</keep-alive>

最后需要注意的是：

• keep-alive同时只能渲染一个直属的子组件，如果keep-alive中包含了 v-for则不会生效。
• 如果包含了多个直属子元素，则keep-alive默认会只取第一个子元素渲染。

总结

本文我们以一个dialog表单的场景引出了今天的主角keep-alive，并详细介绍了keep-alive的作用及用法。现在我们知道了keep-alive可以让符合条件的组件缓存起来不被销毁。那么它是如果让组件缓存呢，它的工作原理是怎样的呢？我们将在下篇文章揭晓。
喜欢的小伙伴欢迎点赞留言加关注哦！