vue2、vue3、react Render过程分析
2021-06-18 17:18:21 8 举报vue2、vue3、react Render过程分析
作者其他创作
大纲/内容
调用insert方法把DOM插入到父节点中
patch方法中分为俩种情况，一种是当oldVnode不存在时，会创建新的节点;另一种是已经存在oldVnode，那么会对oldVnode和vnode进行diff及patch的过程。
src/platforms/web/runtime/index.js$mount()函数
创建子元素
更新DOM
src/core/vdom/create-element.jscreateElement()函数
src/core/vdom/patch.js__patch__函数
生成虚拟节点
src/core/vdom/create-element.js_createElement()函数
src/core/vdom/patch.jsinsert()函数
vue2
src/core/instance/init.js_init()函数
src/core/instance/render.jsinitRender()函数
src/core/instance/lifecycle.js_update()函数
创建虚拟节点vnode
src/core/vdom/patch.jscreateElm()函数
封装_createElement
src/core/instance/lifecycle.jsmountComponent()函数
定义vm实例的_c和$createElement方法
src/core/instance/render.js_render()函数
通过虚拟节点创建真实的DOM并插入到它的父节点中
挂载
src/core/vdom/patch.jscreateChildren()函数
0 条评论
下一页
