周星星

Appearance

前言 ​

上次我们熟悉了从patch根组件到首次渲染DOM树过程分析。遗漏的一个问题，hostCreateElement哪里来呢？节点属性如何初始化？DOM操作哪里来？ 本次就来倒退一下啊，他到底是从哪里来

ensureRenderer ​

image.png

从ensureRenderer中可以看到传入的options

nodeOps就是节点操作

image.png

这个就是DOM操作的来源

节点属性来源 ​

分两种情况，有DOM和组件

DOM ​

image.png

接下来回执行的是patchDOMProp而并不是patchAttr，patchAttr在<input v-model type="checkbox"> 时才会执行

image.png

组件 ​

组件的话，就要回到熟悉的patch函数，

image.png

最后在我们的setupCompontent中就可以发现组件初始化的方法initPropsimage.png

来看看initProps的内容

image.png

setFullProps的内容

image.png

那他怎么去更新的呢？我有首次初始化中y有个非常重要的更新机制就是setupRenderEffect

setupRenderEffect ​

image.png

更新的时候的操作

image.png

patch执行后，最后关键的执行

image.png

总结 ​

image.png