鐒跺悗杈撳嚭娓叉煋鍑芥暟茠anonymous(){with(this){return_c('div',{attrs:{"id":"app"}},[(isShow)?[_v("\n"),_l((items),function(item){return_c('p',[_v(_s(item.title))])})]:_e()],2)}}杩欐椂鍊欐垜浠彲浠ョ湅鍒板綋v-for鍜寁-濡傛灉浣滅敤浜庝笉鍚岀殑鏍囩锛屾槸鍏堝仛鍒ゆ柇锛屽啀娓叉煋鍒楄〃銆傛垜浠煡鐪嬩竴涓媣ue鐨勬簮鐮佷綅缃細\vue-dev\src\compiler\codegen\index.jsexportfunctiongenElement(el:ASTElement,state:CodegenState):string{if(el.parent){el.pre=el.鍓峾|el.parent.pre}if(el.staticRoot&&!el.staticProcessed){returngenStatic(el,state)}elseif(el.once&&!el.onceProcessed){returngenOnce(el,state)}elseif(el.for&&!el.forProcessed){returngenFor(el,state)}elseif(el.if&&!el.ifProcessed){returngenIf(el,state)}elseif(el.tag==='template'&&!el.slotTarget&&!state.pre){杩斿洖genChildren(el,state)||'void0'}elseif(el.tag==='slot'){returngenSlot(el,state)}else{//缁勪欢鎴栧厓绱?..}鍒ゆ柇if鏃讹紝v-for鍏堜簬v-if鍒ゆ柇鏈€缁堢粨璁猴細v-for姣攙-if鏈夋洿楂樼殑浼樺厛绾с€倂ue3.0鐨勭壒鎬т綘鐭ラ亾鍚楋紵Vue3.0鍗冲皢鍙戝竷銆俈ue3.0鐨勭洰鏍囨槸璁￢ue鏍稿績鏇村皬銆佹洿蹇€佹洿寮哄ぇ銆傚洜姝わ紝Vue3.0澧炲姞浜嗕互涓嬫柊鐗规€э細(1)鐩戞帶鏈哄埗鐨勫彉鍖?.0灏嗗甫鏉ュ熀浜庝唬鐞嗙殑瑙傚療鑰呭疄鐜帮紝Proxy鎻愪緵浜嗗弽搴斿紡璺熻釜鐨勫叏璇█瑕嗙洊銆傝繖鏍峰氨娑堥櫎浜哣ue2涓熀浜嶰bject.defineProperty瀹炵幇鐨勫緢澶氶檺鍒讹細鍙兘鐩戞帶灞炴€э紝涓嶈兘鐩戞帶瀵硅薄妫€娴嬪睘鎬х殑澧炲垹鏀规煡锛涙暟缁勭储寮曞拰闀垮害鍙樺寲锛涙敮鎸丮ap銆丼et銆乄eakMap鍜學eakSet銆傛柊鐨勮瀵熻€呰繕鎻愪緵浠ヤ笅鍔熻兘锛氱敤浜庡垱寤哄彲瑙傚療瀵硅薄鐨勫叕鍏盇PI銆傝繖涓轰腑灏忓瀷鍦烘櫙鎻愪緵浜嗕竴涓畝鍗曡交閲忕殑璺ㄧ粍浠剁姸鎬佺鐞嗘柟妗堛€傞粯璁ゆ儏鍐典笅浣跨敤寤惰繜瑙傚療銆傚湪2.x涓紝鏃犺鍙嶅簲鏁版嵁鏈夊澶э紝閮戒細鍦ㄥ惎鍔ㄦ椂瑙傚療鍒般€傚鏋滄偍鐨勬暟鎹泦寰堝ぇ锛岃繖鍙兘浼氬湪搴旂敤绋嬪簭鍚姩鏃跺紩鍏ユ槑鏄剧殑寮€閿€銆傚湪3.x涓紝浠呰瀵熺敤浜庡憟鐜板簲鐢ㄧ▼搴忔渶鍒濆彲瑙侀儴鍒嗙殑鏁版嵁銆傛洿绮剧‘鐨勬洿鏀归€氱煡銆傚湪2.x涓紝閫氳繃Vue.set寮哄埗涓€涓柊灞炴€у皢瀵艰嚧渚濊禆浜庤瀵硅薄鐨勮瀵熻€呮敹鍒版洿鏀归€氱煡銆傚湪3.x涓紝鍙湁渚濊禆浜庣壒瀹氬睘鎬х殑瑙傚療鑰呮墠浼氭敹鍒伴€氱煡銆備笉鍙彉鐨勫彲瑙傚療瀵硅薄锛氭垜浠彲浠ュ垱寤哄€肩殑鈥滀笉鍙彉鈥濈増鏈紙鐢氳嚦宓屽灞炴€э級锛岄櫎闈炵郴缁熸殏鏃跺湪鍐呴儴鈥滆В閿佲€濆畠浠€傝鏈哄埗鍙敤浜庡喕缁損rop浼犻€掓垨Vuex鐘舵€佹爲涔嬪鐨勬洿鏀广€傛洿濂界殑璋冭瘯锛氭垜浠彲浠ヤ娇鐢ㄦ柊鐨剅enderTracked鍜宺enderTriggered閽╁瓙鍑嗙‘璺熻釜缁勪欢閲嶆柊娓叉煋鐨勬椂闂村拰鍘熷洜銆?2)template妯℃澘娌℃湁澶х殑鍙樺寲锛屽彧鏄痵copeslot鍙戠敓浜嗗彉鍖栥€?.x鏈哄埗瀵艰嚧scopeslot鍙樺寲锛岀埗缁勪欢浼氶噸鏂版覆鏌擄紝鑰?.0灏唖copeslot鏀逛负function鏂瑰紡锛屽彧褰卞搷瀛愮粍浠剁殑閲嶆柊娓叉煋锛屾彁鍗囨覆鏌撴€ц兘銆傚悓鏃讹紝瀵逛簬render鍔熻兘鏂归潰锛寁ue3.0涔熶細杩涜涓€绯诲垪鐨勬敼鍔紝鏂逛究澶у鐩存帴浣跨敤api鐢熸垚vdom鐨勪範鎯€?3)鍩轰簬瀵硅薄鐨勭粍浠跺０鏄庢柟寮弙ue2.x涓殑缁勪欢閫氳繃澹版槑鐨勬柟寮忎紶鍏ヤ竴绯诲垪閫夐」锛屼笌TypeScript鐨勭粨鍚堥渶瑕侀€氳繃涓€浜涜楗板櫒鏉ュ畬鎴愩€傝櫧鐒跺彲浠ュ疄鐜板姛鑳斤紝浣嗘槸姣旇緝绻佺悙銆傚湪3.0涓紝缁勪欢鐨勫０鏄庢柟寮忔敼涓轰簡绫诲紡鐨勫啓娉曪紝鏂逛究涓嶵ypeScript缁撳悎銆傚彟澶栵紝vue鐨勬簮鐮佷篃鏄敤TypeScript鍐欑殑銆傚叾瀹炲綋浠ｇ爜鐨勫姛鑳芥瘮杈冨鏉傜殑鏃跺€欙紝灏卞繀椤昏鏈変竴涓潤鎬佺被鍨嬬郴缁熸潵鍋氫竴浜涜緟鍔╃鐞嗐€傜幇鍦╲ue3.0涔熷畬鍏ㄧ敤TypeScript閲嶅啓浜嗭紝杩欎娇寰桾ypeScript鍜屽澶栨毚闇茬殑API缁撳悎璧锋潵鏇村姞瀹规槗銆傞潤鎬佺被鍨嬬郴缁熷浜庣淮鎶ゅ鏉備唬鐮佺‘瀹炴槸蹇呰鐨勩€?4)鍏朵粬鏂归潰鐨勫彉鍖杤ue3.0鐨勫彉鍖栨瘮杈冨叏闈紝涓婇潰鍙秹鍙婂埌涓昏鐨勪笁涓柟闈紝杩樻湁涓€浜涘叾浠栫殑鍙樺寲锛氭敮鎸佽嚜瀹氫箟娓叉煋鍣紝璁﹚eex鍙互浣跨敤鑷畾涔夋覆鏌撳櫒鏉ユ墿灞曪紝鑰屼笉鏄洿鎺ork婧愮爜鏀广€傛敮鎸丗ragment锛堝涓牴鑺傜偣锛夊拰Portal锛堝湪dom鍏朵粬閮ㄥ垎娓叉煋缁勪欢鍐呭锛夌粍浠讹紝骞跺鐞嗕竴浜涚壒娈婂満鏅€傚熀浜巘reeshaking浼樺寲锛屾彁渚涗簡鏇村鐨勫唴缃嚱鏁般€倂ue涓娇鐢ㄤ簡鍝簺璁捐妯″紡1.宸ュ巶妯″紡鈥斺€斾紶鍏ュ弬鏁板垱寤哄疄渚嬭櫄鎷烡OM鏍规嵁涓嶅悓鐨勫弬鏁拌繑鍥炲熀纭€鏍囩鍜岀粍浠禫node鐨刅node2.鍗曚緥妯″紡鈥斺€旀暣涓▼搴忓彧鏈変竴涓疄渚媣uex鍜寁ue-router鐨勬彃浠舵敞鍐屾柟娉昳nstall鍒ゆ柇濡傛灉绯荤粺涓湁瀹炰緥鍒欑洿鎺ヨ繑鍥?.鍙戝竷-璁㈤槄妯″紡锛坴ue浜嬩欢鏈哄埗锛?.瑙傚療鑰呮ā寮忥紙鍝嶅簲寮忔暟鎹師鐞嗭級5.瑁呴グ妯″紡锛?@Decorator鐢ㄦ硶)6.绛栫暐妯″紡绛栫暐妯″紡鏄寚瀵硅薄鏈変竴瀹氱殑琛屼负锛屼絾鏄湪涓嶅悓鐨勫満鏅笅锛岃涓烘湁涓嶅悓鐨勫疄鐜版柟妗堚€斺€旀瘮濡俹ptions鐨勫悎骞剁瓥鐣ue妯℃澘缂栬瘧鍘熺悊Vue鐨勭紪璇戣繃绋嬫槸灏嗘ā鏉胯浆鎹负娓叉煋鍑芥暟鐨勮繃绋嬨€傜涓€姝ワ紝灏嗘ā鏉垮瓧绗︿覆杞崲涓篹lementASTs锛坧arser锛夌浜屾锛屾爣璁癆ST鐨勯潤鎬佽妭鐐癸紝涓昏鐢ㄤ簬铏氭嫙DOM娓叉煋浼樺寲锛坥ptimizer锛夌涓夋锛屼娇鐢╡lementASTs鐢熸垚renderfunctioncodestrings(codegenerator)鐩稿叧浠ｇ爜瑙乪xportfunctioncompileToFunctions(template){//鎴戜滑闇€瑕佸皢html瀛楃涓茶浆涓簉ender鍑芥暟//1.灏唄tml浠ｇ爜杞负ast璇硶鏍慳st鐢ㄤ簬鎻忚堪浠ｇ爜鏈韩褰㈡垚涓€妫垫爲涓嶄粎鍙互鎻忚堪html杩樺彲浠ユ弿杩癱ss鍜宩s璇硶鐨勭粨鏋?/寰堝搴撻兘鐢╝st姣斿webpackbabeleslint绛塴etast=parse(template);//2.浼樺寲闈欐€佽妭鐐?/杩欎釜姣旇緝鏈夋剰鎬濊兘鍘绘簮鐮佺湅鐪嬶紝涓嶅奖鍝嶆牳蹇冨姛鑳藉氨涓嶅幓瀹炵幇//if(options.optimize!==false){//浼樺寲锛圓ST锛岄€夐」锛夛紱//}//3.閫氳繃ast閲嶆柊鐢熸垚浠ｇ爜//鎴戜滑鏈€缁堢敓鎴愮殑浠ｇ爜闇€瑕佸拰render鍑芥暟涓€鏍?/绫讳技_c('div',{id:"app"},_c('div',undefined,_v("hello"+_s(name)),_c('span',undefined,_v("world"))))//_c浠ｈ〃鍒涘缓鍏冪礌_v浠ｈ〃鍒涘缓鏂囨湰_s浠ｈ〃TextJson.stringify--灏嗗璞¤В鏋愭垚鏂囨湰letcode=generate(ast);//浣跨敤with璇硶灏嗚寖鍥存洿鏀逛负this锛岀劧鍚庤皟鐢ㄦ覆鏌撳嚱鏁般€傚彲浠ヤ娇鐢╟all鏉ユ敼鍙榯his锛屾柟渚夸唬鐮佷腑鐨勫彉閲忓彇鍊糽etrenderFn=newFunction(`with(this){return${code}}`);returnrenderFn;}涓轰粈涔堝湪Vue3.0涓娇鐢ㄤ簡Proxy鑰屾斁寮冧簡Object.defineProperty锛烿ue缁勪欢涔嬮棿鏈夊摢浜涢€氫俊鏂瑰紡锛烿ue3.0鍜?.0鐨勫搷搴斿紡鍘熺悊鏈変粈涔堝尯鍒紵vue涓娇鐢ㄤ簡鍝簺璁捐妯″紡锛烿ue鐨勭敓鍛藉懆鏈熸柟娉曟湁鍝簺锛熸偍閫氬父鍦ㄥ摢涓€姝ュ彂閫佽姹傦紵浣犲浣犵殑Vue椤圭洰鍋氫簡鍝簺浼樺寲锛熶綘鐭ラ亾nextTick鍚楋紵vuecli椤圭洰涓璼rc鐩綍涓嬪悇涓枃浠跺す鍜屾枃浠剁殑鐢ㄦ硶浣犵煡閬搉extTick鍚楋紵v-model鐨勫師鐞嗭紵Vue缁勪欢涔嬮棿鏈夊摢浜涢€氫俊鏂瑰紡锛熸洿澶氶潰璇曢璇风偣鍑伙細馃憠寮€鍙戣€呯綉绔?-缁煎悎鍓嶇甯歌vue闈㈣瘯棰?/p>