溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“VUE之mount實例掛載如何實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“VUE之mount實例掛載如何實現”吧！
vue2中是通過new操作符生成實例并將根作為el傳入，vue3中使用mount方法代替是el配置項，使用導出的createApp代替了new操作
源碼
將代碼定位到createApp的位置，調用ensureRenderer向renderer利用閉包保留了一份組件創建流程，如render、patch、createApp等。接著調用createApp返回了一些公共api，如mount、component、directive、mixin等，如可以利用component向vue實例掛載公共組件。最后將mount返回
調用mount，拿到id為app的dom元素，先對子元素清空，接著調用createBaseVNode生成vnode
將vnode作為參數傳給render函數，該函數其實就是在第一步向renderer上保留的key
進入根的patch流程，當前是一個使用了template而非render函數的組件類型，故進入mountComponent流程，調用createComponentInstance初始化公共的基礎組件實例后經過setupComponent做一次加工后，進行組件的render和patch
render結束后拿到組件的vnode進行patch
本次是一個div元素，故進入mountElement流程，經過一系列處理后調用hostInsert將節點掛載到id為app的dom節點下
感謝各位的閱讀，以上就是“VUE之mount實例掛載如何實現”的內容了，經過本文的學習后，相信大家對VUE之mount實例掛載如何實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
