mountElement

mountComponent

componentUpdateFn()

effect2.run()

instance.update()

invalidateJob(instance.update)

updateComponentPreRender

是否和suspense有关

n2.el = n1.el; instance.vnode = n2;

shouldUpdateComponent(n1, n2, optimized)

updateComponent(n1, n2, optimized)

patchEvent

patchAttr

patchDOMProp

patchStyle

patchClass

patchProp((el, key, prevValue, nextValue,..)

mountChildren(c2,container,anchor,parentComponent,...)

hostSetElementText(container, "")

新vnode不存在

unmountChildren(c1, parentComponent)

patchKeyedChildren(c1,c2,...)

prevShapeFlag & 16 /* ARRAY_CHILDREN */

hostSetElementText(container, c2)

unmountChildren(c1, parentComponent, parentSuspense)

shapeFlag & 8 /* TEXT_CHILDREN */

遍历循环patch dynamicChildren

patchChildren(n1,n2,el,...)

// 快速通道 patchBlockChildren(n1.dynamicChildren,dynamicChildren,el, ... )

patchElement(n1,n2,parentComponent,...)

processComponent(n1,n2,container,..)

processElement(n1,n2,container,..)

queuePostRenderEffect(u, parentSuspense);

next.el = nextTree.el

patch(n1, n2, container, ...)

normalizeVNode(child)

rende()

否

是

是否触发数据变更

invokeArrayFns(bu)

callWithErrorHandling(job, null, 14 /* SCHEDULER */);

function set3(target, key, value, receiver)

function triggerEffect(effect2, debuggerEventExtraInfo) { if (effect2 !== activeEffect || effect2.allowRecurse) { if (effect2.onTrigger) { effect2.onTrigger(extend({ effect: effect2 }, debuggerEventExtraInfo)); } if (effect2.scheduler) { effect2.scheduler(); } else { effect2.run(); } } }

flushJobs(seen3)

组件实例属性变更

queueJob()