這篇文章主要講解了“VUE之mount實(shí)例掛載如何實(shí)現(xiàn)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“VUE之mount實(shí)例掛載如何實(shí)現(xiàn)”吧！

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供滁州網(wǎng)站建設(shè)、滁州做網(wǎng)站、滁州網(wǎng)站設(shè)計(jì)、滁州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、滁州企業(yè)網(wǎng)站模板建站服務(wù)，十多年滁州做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

vue2中是通過new操作符生成實(shí)例并將根作為el傳入，vue3中使用mount方法代替是el配置項(xiàng)，使用導(dǎo)出的createApp代替了new操作

源碼

將代碼定位到createApp的位置，調(diào)用ensureRenderer向renderer利用閉包保留了一份組件創(chuàng)建流程，如render、patch、createApp等。接著調(diào)用createApp返回了一些公共api，如mount、component、directive、mixin等，如可以利用component向vue實(shí)例掛載公共組件。最后將mount返回

調(diào)用mount，拿到id為app的dom元素，先對(duì)子元素清空，接著調(diào)用createBaseVNode生成vnode

將vnode作為參數(shù)傳給render函數(shù)，該函數(shù)其實(shí)就是在第一步向renderer上保留的key

進(jìn)入根的patch流程，當(dāng)前是一個(gè)使用了template而非render函數(shù)的組件類型，故進(jìn)入mountComponent流程，調(diào)用createComponentInstance初始化公共的基礎(chǔ)組件實(shí)例后經(jīng)過setupComponent做一次加工后，進(jìn)行組件的render和patch

render結(jié)束后拿到組件的vnode進(jìn)行patch

本次是一個(gè)div元素，故進(jìn)入mountElement流程，經(jīng)過一系列處理后調(diào)用hostInsert將節(jié)點(diǎn)掛載到id為app的dom節(jié)點(diǎn)下

感謝各位的閱讀，以上就是“VUE之mount實(shí)例掛載如何實(shí)現(xiàn)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)VUE之mount實(shí)例掛載如何實(shí)現(xiàn)這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！