VUE之mount實例掛載如何實現(xiàn)

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

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

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

源碼

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

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

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

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

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

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

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

名稱欄目：VUE之mount實例掛載如何實現(xiàn)
網(wǎng)站路徑：http://muchs.cn/article6/ihecog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、云服務(wù)器、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)