仿keep小程序源码（keepalive源码）

本篇文章给大家谈谈仿keep小程序源码，以及keepalive源码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、keep跑步截图背景公里自定义怎么搞
• 2、keep-alive实现原理
• 3、keep小组件在快速游览里会自己消失

keep跑步截图背景公里自定义怎么搞

keep刷跑步公里数截图方式如下:

1打开keep，点击程序页面右下角的我。

2进入keep个人页面，点击左侧的运动数据。

3进入我的运动数据页面，点击右上角的运动历史。

4进入我们的运动历史页面，点击查看运动信息。

5进入运动详情页面，就可以查看运动历史详情，截图就可以使用了。

keep-alive实现原理

一、概念：内置的抽象组件，自身不会渲染Dom元素，也不会出现在父组件链中。【abstract：true --- 判断当前组件虚拟dom是否渲染成真实dom的关键】。

二、作用：缓存不活动的组件实例。

三、场景： 列表页面选择筛选条件过滤一份数据列表， 再进入详情页面，再返回该列表页面、我们希望：表页面可以保留用户的筛选（或选中）状态。

四、用法：

1、在动态组件中的应用

2、在vue-router中的应用

四、源码

******this.cache 缓存已经创建过的 vnode

******直接实现了 render 函数，而不是我们常规模板的方式。

render方法：

第一步：获取keep-alive包裹着的第一个子组件对象及其组件名；

第二步：根据设定的黑白名单（如果有）进行条件匹配，决定是否缓存。不匹配，直接返回组件实例（VNode），否则执行

第三步；

第三步：根据组件ID和tag生成缓存Key，并在缓存对象中查找是否已缓存过该组件实例。如果存在，直接取出缓存值并更新该key在this.keys中的位置（更新key的位置是实现LRU置换策略的关键），否则执行第四步；

第四步：在this.cache对象中存储该组件实例并保存key值，之后检查缓存的实例数量是否超过max设置值，超过则根据LRU置换策略删除最近最久未使用的实例（即是下标为0的那个key）;

第五步：最后并且很重要，将该组件实例的keepAlive属性值设置为true。

五、渲染

Vue的渲染是从图中render阶段开始的

但keep-alive的渲染是在patch阶段（构建组件树（虚拟DOM树），并将VNode转换成真正DOM节点的过程）

六、keep-alive包裹的组件是如何使用缓存的？【在patch阶段，会执行createComponent函数】

1、在首次加载被包裹组建时，由keep-alive.js中的render函数可知，vnode.componentInstance的值是undfined，keepAlive的值是true，因为keep-alive组件作为父组件，它的render函数会先于被包裹组件执行；那么只执行到i(vnode,false)，后面的逻辑不执行；

2、再次访问被包裹组件时，vnode.componentInstance的值就是已经缓存的组件实例，那么会执行insert(parentElm, vnode.elm, refElm)逻辑，这样就直接把上一次的DOM插入到父元素中。

keep小组件在快速游览里会自己消失

系统bug。小部件是一个简单的扩展应用程序，手机上的keep小组件在快速游览里会自己消失的原因是系统bug。手机，全称为移动电话或无线电话，通常称为手机，原本只是一种通讯工具，早期又有大哥大的俗称。

仿keep小程序源码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于keepalive源码、仿keep小程序源码的信息别忘了在本站进行查找喔。