说一说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;
}
} );
}`