keep-alive实现原理
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了keep-alive实现原理相关的知识，希望对你有一定的参考价值。
参考技术A 一、概念：内置的抽象组件，自身不会渲染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-alive组件的作用和原理
以上是关于keep-alive实现原理的主要内容，如果未能解决你的问题，请参考以下文章