VUE之mount实例挂载如何实现

这篇文章主要讲解了“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实例挂载如何实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

名称栏目：VUE之mount实例挂载如何实现
网站路径：https://www.cdcxhl.com/article6/ihecog.html

成都网站建设公司_创新互联，为您提供网站制作、网站导航、网站建设、云服务器、手机网站建设、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联