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

￡神魔★判官ぃ 2022-09-15 15:48 90阅读 0赞

### 前言 ###

> 【一天一个小知识，每天进步一点点】小伙伴们大家好，今天将要给大家分享是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>
    
    <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>
>     
>     
>     <keep-alive :include="/a|b/">
>       <component :is="view"></component>
>     </keep-alive>
>     
>     
>     <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可以让符合条件的组件缓存起来不被销毁。那么它是如果让组件缓存呢，它的工作原理是怎样的呢？我们将在下篇文章揭晓。  
> 喜欢的小伙伴欢迎点赞留言加关注哦！