浠€涔堟槸淇濇椿缁勪欢锛?keep-alive>鏄疺ue鐨勫唴缃粍浠讹紝鐢ㄦ潵鍖呰缁勪欢锛岃揪鍒扮紦瀛樼粍浠跺疄渚嬬殑鏁堟灉~Vue瀹樻柟鏂囨。涓彁鍒帮細鏄竴涓娊璞＄粍浠讹細瀹冧笉娓叉煋涓€涓狣OM鍏冪礌鏈韩锛屼篃涓嶄細鍑虹幇鍦ㄧ粍浠剁殑鐖剁粍浠堕摼涓€傚綋缁勪欢鍦?keep-alive>涓垏鎹㈡椂锛屽叾婵€娲诲拰鍘绘縺娲荤殑鐢熷懡鍛ㄦ湡閽╁瓙鍑芥暟灏嗙浉搴旀墽琛屻€俴eep-alive缁勪欢鍘熷垯鍖归厤鍜岃繃婊ゅ櫒鍖呮嫭-瀛楃涓叉垨姝ｅ垯琛ㄨ揪寮忋€傚彧鏈夊叿鏈夊尮閰嶅悕绉扮殑缁勪欢鎵嶄細琚紦瀛樸€俥xclude-瀛楃涓叉垨姝ｅ垯琛ㄨ揪寮忋€傚悕绉板尮閰嶇殑浠讳綍缁勪欢閮戒笉浼氳缂撳瓨銆傚湪鍒濆鍖栫殑created闃舵锛屽垵濮嬪寲浜嗕袱涓彉閲忥紝鍒嗗埆鏄痗ache鍜宬eys銆俶ounted闃舵浼氱洃鎺nclude鍜宔xclude鍙橀噺鐨勫€笺€俢reated(){this.cache=Object.create(null)this.keys=[]},mounted(){this.$watch('include',val=>{pruneCache(this,name=>matches(val,name))})this.$watch('exclude',val=>{pruneCache(this,name=>!matches(val,name))})}锛屽彲浠ョ湅鍒板鏋渋nclude鎴栬€卐xclude鐨勫€煎彂鐢熷彉鍖栵紝pruneCache鍑芥暟浼氳瑙﹀彂锛屼絾鏄渶瑕佹牴鎹甿atches鍑芥暟鐨勮繑鍥炲€兼潵鍒ゆ柇杩囨护鏉′欢锛屽厛鏉ョ湅鐪嬪惂馃憞銆傝繃婊ゆ潯浠跺嚱鏁癿atches(pattern:string|RegExp|Array,name:string):boolean{if(Array.isArray(pattern)){returnpattern.indexOf(name)>-1}elseif(typeofpattern==='string'){returnpattern.split(',').indexOf(name)>-1}elseif(isRegExp(pattern)){returnpattern.test(name)}/*istanbul蹇界暐涓嬩竴涓?/returnfalse}鍙互鐪嬪埌pattern鍙互鏈変笁涓€硷紝鍒嗗埆鏄細stringRegExpArray鐒跺悗鍒ゆ柇鍚嶇О鏄惁鍦╬attern鎸囧畾鐨勫€?鑼冨洿鍐咃紝鏈€鍚庢牴鎹粨鏋滆繑鍥瀟rue鎴杅alse銆備笉绠℃槸include杩樻槸exclude锛屽畠浠殑鍊奸兘涓嶆槸涓€鎴愪笉鍙樼殑銆傛瘡褰撹繃婊ゆ潯浠跺彂鐢熷彉鍖栨椂锛屽氨闇€瑕佷粠鐜版湁缂撳瓨涓€滅Щ闄も€濅笉鍚堟牸鐨勯敭銆俧unctionpruneCache(keepAliveInstance:any,filter:Function){const{cache,keys,_vnode}=keepAliveInstancefor(constkeyincache){constcachedNode:?VNode=cache[key]if(cachedNode){甯搁噺鍚嶇О:?string=getComponentName(cachedNode.componentOptions)if(name&&!filter(name)){pruneCacheEntry(cache,key,keys,_vnode)}}}}鍙互鐪嬪埌杩欓噷璋冪敤浜唒runeCacheEntry鏉モ€滃墧闄も€濅笉婊¤冻鐨刱ey缂撳瓨鏉′欢馃憞functionpruneCacheEntry(cache:VNodeCache,key:string,keys:Array,current?:VNode){constcached=cache[key]if(cached&&(!current||cached.tag!==current.tag)){cached.componentInstance.$destroy()}cache[key]=nullremove(keys,key)}杩欓噷鏈変竴涓粏鑺傦細//濡傛灉褰撳墠vnode涓虹┖锛屾垨鑰卌ached鍜宑urrent涓嶆槸鍚屼竴涓妭鐐?/璋冪敤$destroy閿€姣佺紦瀛樺嵆鍙紵鍏跺疄姣忔閮戒細娓叉煋缁勪欢姣忔閮藉缁勪欢杩涜杩囨护锛屼繚璇佹墍鏈夌紦瀛樼殑缁勪欢閮介€氳繃浜嗚繃婊ゆ潯浠娥煈噐ender(){...if(//notincluded(include&&(!name||!matches(include,name)))||//excluded(exclude&&name&&matches(exclude,name))){returnvnode}...}缂撳瓨娣樻卑绛栫暐缁勪欢闄や簡涓婇潰鎻愬埌鐨勪袱涓弬鏁板锛岃繕鍙互浼犲叆涓€涓弬鏁帮細maxdocument鎻愬埌浜嗕竴涓疄渚嬮攢姣佽鍒欙細缂撳瓨鏈€杩戣闂殑瀹炰緥锛岄攢姣佺紦瀛樹腑鏈€闀挎椂闂存湭璁块棶鐨勫疄渚嬨€傚叾瀹炶繖灏辨槸涓€绉嶇紦瀛樻窐姹扮瓥鐣モ€斺€擫RU绠楁硶銆傛洿璇︾粏鐨勮鍒欙細鍦ㄨ揪鍒扮紦瀛橀檺鍒朵箣鍓嶏紝瀹炰緥涓嶈瑙嗕负閿€姣併€傚浜庢渶杩戣闂殑鏁版嵁锛屾窐姹颁紭鍏堢骇鏈€浣庛€傚浜庤闂鐜囨渶浣庣殑鏁版嵁锛屾窐姹颁紭鍏堢骇鏈€楂樸€傝繖鎰忓懗鐫€鎴戜滑闇€瑕佷袱涓暟鎹粨鏋勬潵琛ㄨ揪杩欎釜绠楁硶锛屼竴涓敤鏉ュ瓨鍌ㄧ紦瀛橈紝鍙︿竴涓敤鏉ュ瓨鍌ㄥ拰琛ㄧず缂撳瓨璁块棶鐨勬柊鏃х▼搴︺€俈ue2.x鍜孷ue3.x鐨勫紓鍚岀偣Vue2.x浣跨敤cache鏉ュ瓨鍌ㄧ紦瀛橈紝key鏉ュ瓨鍌ㄧ紦瀛樹腑璁块棶鐨勬柊椴滃害锛屽叾涓璫ache鏄竴涓璞★紝key鏄竴涓暟缁勩€俢onst{cache,keys}=thisconstkey:?string=vnode.key==null//鐩稿悓鐨勬瀯閫犲嚱鏁板彲鑳戒細琚敞鍐屼负涓嶅悓鐨勬湰鍦扮粍浠?/鎵€浠ュ彧鏈塩id鏄笉澶熺殑(#3269)?componentOptions.Ctor.cid+(componentOptions.tag?`::${componentOptions.tag}`:''):vnode.keyif(cache[key]){vnode.componentInstance=cache[key].componentInstance//浣垮綋鍓峩ey鏈€鏂伴矞remove(keys,key)keys.push(key)}else{cache[key]=vnodekeys.push(key)//淇壀鏈€鏃х殑鏉＄洰if(this.max&&keys.length>parseInt(this.max)){pruneCacheEntry(cache,keys[0],keys,this._vnode)}}浣嗘槸鍦╒ue3.0涓粛鐒朵娇鐢↙RU绠楁硶锛屼絾鏄墍浣跨敤鐨勭紦瀛樺拰key鐨勪綔鐢ㄤ笌2.0涓浉鍚岋紝鍙槸鏁版嵁缁撴瀯鍙戠敓浜嗗彉鍖栵紝鍏朵腑:缂撳瓨鏄敤Map鍒涘缓鐨勯敭const閿槸鐢⊿et=vnode.key==null鍒涘缓鐨勶紵comp:vnode.keyconstcachedVNode=cache.get(key)//鍏嬮殕vnode濡傛灉瀹冭閲嶇敤鍥犱负鎴戜滑瑕佹敼鍙樺畠if(vnode.el){vnode=cloneVNode(vnode)}cache.set(key,vnode)if锛堢紦瀛榁Node){//澶嶅埗鎸傝浇鐘舵€乿node.el=cachedVNode.elvnode.component=cachedVNode.componentif(vnode.transition){//閫掑綊鏇存柊瀛愭爲涓婄殑杞崲鎸傞挬setTransitionHooks(vnode,vnode.transition!)}//閬垮厤vnode琚寕杞戒负鏂扮殑vnode.shapeFlag|=ShapeFlags.COMPONENT_KEPT_ALIVE//浣胯繖涓敭鎴愪负鏈€鏂伴矞鐨刱eys.delete(key)keys.add(key)}else{keys.add(key)//淇壀鏈€鏃х殑鏉＄洰if(max&&keys.size>parseInt(maxasstring,10)){pruneCacheEntry(Array.from(keys)[0])}}鏄剧劧Vue3.x鍦ㄦ椂闂村鏉傚害涓婃洿濂斤紝鍥犱负Set鍒犻櫎涓€涓猭ey瀹冨彧闇€瑕?O(1)$鐨勬椂闂村鏉傚害锛屼絾鏄粠鏁扮粍涓垹闄や竴涓敭闇€瑕?O(n)$鐨勬椂闂村鏉傚害銆備笉杩囧嵆浣挎槸Vue3.x鐨勫啓娉曡繕鏄湁鐐归棶棰橈紝姣斿杩欐馃憞pruneCacheEntry(Array.from(keys)[0])浼氬厛鎶妅eys杞垚鏁扮粍锛岀劧鍚庡彇绗竴椤广€傚鏉傛€т細绐佺劧澧炲姞銆傝繖鍙兘鏄敱浜庝唬鐮佸ぇ灏忓拰鍙鎬х殑闂銆傛槸鎬ц兘宸茶鎶樿》銆傛瘯绔熷緢灏戠紦瀛樺ぇ閲忕殑缁勪欢~Expansion-commonLRU绠楁硶瀹炵幇LRU绠楁硶鍦ㄥ疄鐜伴€昏緫鐨勬椂鍊欓渶瑕佹弧瓒充互涓嬩袱鐐癸細鍒犻櫎鍜屾坊鍔犵紦瀛樼殑鏃堕棿澶嶆潅搴︽槸$O(1)$鐨勬椂闂存煡鎵剧紦瀛樼殑澶嶆潅搴︿负$O(1)$鍏朵腑鍙屽悜寰幆閾捐〃鍙互婊¤冻鏉′欢1锛屽搱甯岃〃鍙互婊¤冻鏉′欢2銆傚熀浜庢锛屾垜浠彲浠ヤ娇鐢ㄥ搱甯岃〃+鍙屽悜寰幆閾捐〃鐨勭粍鍚堟潵瀹炵幇LRU绠楁硶銆備笅闈㈡槸瀹炵幇浠ｇ爜锛屽熀浜嶭eetCode涓婄殑涓€涓鐩細LRU缂撳瓨鏈哄埗锛屾湁鍏磋叮鐨勫悓瀛︾湅瀹屽悗涓嶅Θ鍐欎笂鍘汇€傚搱甯岃〃+鍙屽悜寰幆閾捐〃瀹炵幇LRU绠楁硶/***@param{number}capacity*/constLRUCache=function(capacity){this.map=newMap()this.doubleLinkList=newDoubleLinkList()this.maxCapacity=瀹归噺this.currCapacity=0};/***@param{number}val*@param{string}key*/constNode=function(val,key){this.val=valthis.key=keythis.next=nullthis.prev=null}constDoubleLinkList=function(){this.head=nullthis.tail=null}/***@param{Node}node*娣诲姞鑺傜偣*/DoubleLinkList.prototype.addNode=function(node){if(!this.head){this.head=nodethis.tail=nodethis.head.next=this.tailthis.head.prev=this.tailthis.tail.next=this.headthis.tail.prev=this.head}else{constnext=this.headthis.head=nodethis.head.next=nextthis.head.prev=this.tailthis.tail.next=this.headnext.prev=this.head}}/***@param{Node}node*@return{void}*鍒犻櫎鍙屽悜閾捐〃涓殑鑺傜偣*/DoubleLinkList.prototype.deleteNode=function(node){constprev=node.prevnext=node.nextprev.next=nextnext.prev=prev//澶村熬鑺傜偣鐗规畩鍒ゆ柇if(this.head===node){this.head=next}if(this.tail===node){this.tail=prev}}/***@param{number}key*@return{number}*/LRUCache.prototype.get=function(key){const{map,doubleLinkList}=this//褰撹闂竴涓猭ey鏃讹紝鍏堝垹闄ゅ畠锛岀劧鍚庤缃湪鍙屽悜閾捐〃鐨勯《閮╥f(map.has(key)){constnode=map.get(key)doubleLinkList.deleteNode(node)doubleLinkList.addNode(node)returnnode.val}return-1};/***@param{number}key*@param{number}value*@return{void}*/LRUCache.prototype.put=function(key,value){const{map,doubleLinkList}=this//濡傛灉閿凡缁忓瓨鍦╡xists//閭ｄ箞鍙鏀瑰彉key瀵瑰簲鐨剉alue//鐒跺悗鎶妅ey瀵瑰簲鐨勮妭鐐规斁鍦╤eadof鍙屽悜閾捐〃if(map.has(key)){//鍏堝湪mapconstn涓壘浠杘de=map.get(key)//鐒跺悗鍒犻櫎瀹僤oubleLinkList.deleteNode(node)//鏀瑰彉鍊糿ode.val=value//鐒跺悗娣诲姞鍒伴摼琛ㄧ殑澶撮儴doubleLinkList.addNode(node)map.set(key,node)}else{constnode=newNode(value,key)//濡傛灉涔嬪墠娌℃湁杩欎釜key涓旂紦瀛樺凡婊f(this.currCapacity===this.maxCapacity){//鍒犻櫎灏捐妭鐐筬irstmap.delete(doubleLinkList.tail.key)doubleLinkList.deleteNode(doubleLinkList.tail)//鐒跺悗灏嗘柊鐨刱ey娣诲姞鍒伴摼琛ㄥ苟鏄犲皠doubleLinkList.addNode(node)map.set(key,node)}else{//鍚﹀垯缂撳瓨鏈弧//鐩存帴灏嗘柊鐨刱ey娣诲姞鍒伴摼琛ㄥ拰map涓€俤oubleLinkList.addNode(node)map.set(key,node)//缂撳瓨瀹归噺鑷this.currCapacity++}}};鍙傝€冩枃妗ｏ細keep-aliveVue2.x婧愮爜Vue3.x婧愮爜
