首页前端开发其他前端知识mount实例挂载怎样实现,方法是什么

mount实例挂载怎样实现,方法是什么

时间2024-03-25 03:18:03发布访客分类其他前端知识浏览1182
导读:这篇文章主要给大家介绍“mount实例挂载怎样实现,方法是什么”的相关知识,下文通过实际案例向大家展示操作过程,内容简单清晰,易于学习,有这方面学习需要的朋友可以参考了解一下,希望这篇“mount实例挂载怎样实现,方法是什么”文章对大家有所...
这篇文章主要给大家介绍“mount实例挂载怎样实现,方法是什么”的相关知识,下文通过实际案例向大家展示操作过程,内容简单清晰,易于学习,有这方面学习需要的朋友可以参考了解一下,希望这篇“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节点下

总结

生成组件实例--执行组件mount--通过render生成组件vnode--执行patch对各个节点调用原生domApi做页面挂载--完成mounted


感谢各位的阅读,以上就是“mount实例挂载怎样实现,方法是什么”的内容了,通过以上内容的阐述,相信大家对mount实例挂载怎样实现,方法是什么已经有了进一步的了解,如果想要了解更多相关的内容,欢迎关注网络,网络将为大家推送更多相关知识点的文章。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: mount实例挂载怎样实现,方法是什么
本文地址: https://pptw.com/jishu/652504.html
PHP中比较两个数组的方法是什么 Vue项目中Pinia能做什么,怎样使用

游客 回复需填写必要信息