说一说keep-alive实现原理

30 阅读1分钟

说一说keep-alive实现原理

keep-alive组件接受三个属性参数:include、exclude、max
●include 指定需要缓存的组件name集合,参数格式支持String, RegExp, Array。当为字符串的时候,多个组件名称以逗号隔开。
●exclude 指定不需要缓存的组件name集合,参数格式和include一样。
●max 指定最多可缓存组件的数量,超过数量删除第一个。参数格式支持String、Number。
原理
keep-alive实例会缓存对应组件的VNode,如果命中缓存,直接从缓存对象返回对应VNode
LRU(Least recently used) 算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”。(墨菲定律:越担心的事情越会发生)
#16 为什么访问data属性不需要带data
vue中访问属性代理 this.data.xxx 转换 this.xxx 的实现

JavaScript复制代码

/** 将 某一个对象的属性 访问 映射到 对象的某一个属性成员上 */ ` function proxy( target, prop, key ) {

Object.defineProperty( target, key, {

enumerable: true,

configurable: true,

get () {

return target[ prop ][ key ];

},

set ( newVal ) {

target[ prop ][ key ] = newVal;

}

} );

}`