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>
<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可以让符合条件的组件缓存起来不被销毁。那么它是如果让组件缓存呢，它的工作原理是怎样的呢？我们将在下篇文章揭晓。
喜欢的小伙伴欢迎点赞留言加关注哦！

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

Vue2.0源码解析——编译原理
Vue2.0源码解析--编译原理前言:本篇文章主要对Vue2.0源码的编译原理进行一个粗浅的分析,其中涉及到正则.高阶函数等知识点,对js的考察是非常的深的,因此我们来好好啃一下这个编译原理的部分. ...
Vue2.0源码解析 - 知其然知其所以然之Vue.use
前言小伙伴们大家好.用过Vue的小伙伴都知道,在我们进行Vue开发时,避免不了会使用一些第三方的库,比如说ElementUI组件库.当我们导入好这些组件库后会执行一个Vue.use函数,然后把导进来 ...
vue2.0源码解析(一)
1.先下载vue源码(当前版本为:2.6.11) 地址: git clone https://github.com/vuejs/vue.git 2.切换到package.json dev脚本中 -c ...
锚框、交并比和非极大值抑制（tf2.0源码解析)
锚框.交并比和非极大值抑制(tf2.0源码解析) 文章目录锚框.交并比和非极大值抑制(tf2.0源码解析) 一.锚框生成 1.锚框的宽高 2.锚框的个数 3.注意点(★★★) 4.tf2.0代码二 ...
前端进阶-手写Vue2.0源码（三）｜技术点评
前言今天是个特别的日子祝各位女神女神节快乐哈封面我就放一张杀殿的帅照表达我的祝福哈哈此篇主要手写 Vue2.0 源码-初始渲染原理上一篇咱们主要介绍了 Vue 模板编译原理它是 Vue ...
solrlucene3.6.0源码解析（三）
solr索引操作(包括新增更新删除提交合并等)相关UML图如下从上面的类图我们可以发现,其中体现了工厂方法模式及责任链模式的运用 UpdateRequestProcessor相当于责任链模式 ...
Heritrix 3.1.0 源码解析（八）
本文接着分析存储CrawlURI curi的队列容器,最重要的是BdbWorkQueue类及BdbMultipleWorkQueues类 BdbWorkQueue类继承自抽象类WorkQueue,抽象 ...
Heritrix 3.1.0 源码解析（六）
本文分析BdbFrontier对象的相关状态和方法 BdbFrontier类继承自WorkQueueFrontier类 WorkQueueFrontier类继承自AbstractFrontier类 ...
Heritrix 3.1.0 源码解析（十一）
上文分析了Heritrix3.1.0系统是怎么添加CrawlURI curi对象的,那么在系统初始化的时候,是怎么载入CrawlURI curi种子的呢? 我们回顾前面的文章,在我们执行采集任务的la ...

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

前言

keep-alive是什么

keep-alive的用法

总结

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

最新文章

热门文章