馃淇濇椿缁勪欢鐨勪綔鐢ㄤ繚娲荤粍浠舵槸Vue鐨勪竴涓唴閮ㄧ粍浠讹紝涓昏鐢ㄤ簬缂撳瓨鍐呴儴缁勪欢瀹炰緥銆傝繖鏍峰仛鐨勭洰鐨勬槸褰撳垏鎹eep-alive鍐呴儴缁勪欢鏃讹紝涓嶉渶瑕侀噸鏂板垱寤虹粍浠跺疄渚嬨€傛瘮濡傜敤v-if鏉ュ喅瀹氭弧瓒充粈涔堟潯浠朵娇鐢ㄥ摢涓粍浠讹紝杩樻湁璺敱寮€鍏炽€傛湁涓€涓?router-view>锛屽畠浼氭牴鎹矾鐢辩殑閰嶇疆閫夋嫨鍏朵腑涓€涓粍浠舵覆鏌撳埌杩欎釜浣嶇疆銆傚綋璺敱鍒囨崲鏃讹紝褰撳墠缁勪欢琚攢姣侊紝瀹冧細娓叉煋鍙︿竴涓粍浠躲€傚鏋渒eep-alive宓屽鍦ㄦ渶澶栧眰锛屽儚杩欐牱锛?keepAlive>杩欐牱锛宬eepAlive閲岄潰鐨勭粍浠舵潵鍥炲垏鎹㈡椂锛屼笉闇€瑕侀噸鏂板垱寤虹粍浠跺疄渚嬶紝鑰屾槸鐩存帴浣跨敤缂撳瓨涓殑瀹炰緥銆備竴鏂归潰鍙互閬垮厤鍒涘缓缁勪欢甯︽潵鐨勬晥鐜囧紑閿€锛屽彟涓€鏂归潰鍙互淇濈暀缁勪欢鐨勭姸鎬併€備絾鍚屾椂涔熸湁涓€涓己鐐癸紝灏辨槸褰撶粍浠跺寘鍚殑鍐呭寰堝鏃讹紝浼氬崰鐢ㄦ洿澶氱殑鍐呭瓨绌洪棿锛宬eepAlive鐩稿綋浜庣敤绌洪棿鎹㈠彇鏃堕棿銆俴eepAlive鏈塱nclude鍜宔xclude灞炴€э紝鍐冲畾鍝簺缁勪欢鍙互杩涘叆缂撳瓨銆傝繕鏈変竴涓猰ax灞炴€э紝閫氳繃瀹冨彲浠ヨ缃紦瀛樼殑鏈€澶ф暟閲忋€傚綋缂撳瓨鐨勫疄渚嬫暟閲忚秴杩囪缃殑鏁伴噺鏃讹紝Vue浼氱Щ闄ゆ渶闀挎椂闂存湭琚娇鐢ㄧ殑缁勪欢缂撳瓨銆傚彈keep-alive鐨勫奖鍝嶏紝閲岄潰鎵€鏈夊祵濂楃殑缁勪欢閮芥湁activated鍜宒eactivated涓や釜鐢熷懡鍛ㄦ湡閽╁瓙鍑芥暟锛屽垎鍒湪缁勪欢婵€娲诲拰鍘绘縺娲绘椂瑙﹀彂銆傜涓€涓縺娲荤殑瑙﹀彂鍣ㄦ槸mounted鍚庰煂籯eep-alive鐨勫師鐞嗗湪鍏蜂綋瀹炵幇涓婏紝keep-alive鍐呴儴缁存姢浜嗕竴涓猭ey鏁扮粍鍜屼竴涓紦瀛樺璞?/keep-alive鍐呴儴鐢熷懡鍛ㄦ湡鍑芥暟created(){this.cache=Object.create(null)this.keys=[]}锛宬ey鏁扮粍璁板綍浜嗗綋鍓嶇紦瀛樼粍浠剁殑key鍊笺€傚鏋滅粍浠舵病鏈夋寚瀹氶敭鍊硷紝鍒欎細鑷姩鐢熸垚涓€涓敮涓€鐨勯敭鍊笺€傜紦瀛樺璞′細浠ey鍊间负key锛寁node涓簐alue鏉ョ紦瀛樼粍浠跺搴旂殑virtual鍦―OM鐨勪繚娲绘覆鏌撳姛鑳戒腑锛屽叾鍩烘湰閫昏緫鏄垽鏂綋鍓嶆覆鏌撶殑vnode鏄惁鏈夊搴旂殑缂撳瓨銆傚鏋滄湁锛屽畠浼氫粠缂撳瓨涓鍙栫浉搴旂殑缁勪欢瀹炰緥锛屽鏋滄病鏈夛紝瀹冧細缂撳瓨瀹冦€傚綋缂撳瓨鏁伴噺瓒呰繃max璁剧疆鐨勫€兼椂锛宬eep-alive浼氱Щ闄ey鏁扮粍涓殑绗竴涓厓绱爎ender(){constslot=this.$slots.default;//鑾峰彇榛樿鎻掓Ыconstvnode=getFirstComponentChild(slot);//鑾峰彇妲戒腑绗竴涓粍浠剁殑vnodeconstname=getComponentName(vnode.componentOptions);//鑾峰彇缁勪欢鍚嶇Оconst{cache,keys}=this;//鑾峰彇褰撳墠娣峰悎瀵硅薄鍜岄敭鏁扮粍constkey:?string=vnode.key==null?componentOptions.Ctor.cid+(componentOptions.tag?`::${componentOptions.tag}`:''):vnode.key;//鑾峰彇缁勪欢鐨刱ey鍊硷紝濡傛灉娌℃湁key鍊硷紝鍒欐牴鎹鍒欒嚜鍔ㄧ敓鎴恑f(cache[key]){//鏈夌紦瀛?/澶嶇敤缁勪欢瀹炰緥vnode.componentInstance=缂撳瓨[key].componentInstanceremove(keys,key);//鍒犻櫎閿€?/灏嗛敭鍊兼坊鍔犲埌鏁扮粍鐨勬湯灏撅紝杩欐槸涓轰簡淇濊瘉鏈€杩戜娇鐢ㄧ殑缁勪欢鍦ㄦ暟缁勭殑鍚庨潰锛屼富瑕佹槸涓轰簡鏂逛究璁剧疆max鍊煎垹闄ょ粍浠堕暱鏃堕棿鏈娇鐢╧eys.push(key)}else{//Nocache[key]=vnodekeys.push(key)//淇壀鏈€鏃х殑鏉＄洰if(this.max&&keys.length>parseInt(this.max)){//瓒呰繃鏈€澶х紦瀛樻暟锛岀Щ闄ゆ渶鑰佺殑涓€涓猭ey瀵瑰簲鐨勭紦瀛樻潯鐩畃runeCacheEntry(cache,keys[0],keys,this._vnode)}}vnode.data.keepAlive=true}杩斿洖vnode||(slot&&slot[0])}馃槉濂戒簡锛屼互涓婂氨鏄垜鐨勫垎浜簡锛屾杩庤瘎璁哄尯璁ㄨ楦綖甯屾湜澶у鍠滄馃憤鏀寔锝烉煒橈紝鎴戜細鏇存湁鍔ㄥ姏馃
