分析vue源码--->render函数

623 阅读1分钟

平时开发过程中,我们来定义render的场景不多见,写的最多的就是使用template模板,而在职的mouted方法中会把template编译成render方法

而render的最终目的就是执行createElement生成并返回vnode

这里的createElement方法

其中的data可以不传,如果不传,则对参数进行重载即全部前移一位,最终执行_createElement,总结为createElement实际是对参数进行了重新定义

_createElement


data不可以是响应式的,否则会报错,后面也有相应的错误机制判断

virtual DOM实际上是一个树状结构,每一个vNode都可能会有若干个子节点,这些子节点也是vNode类型,而根据normallizationType的值得不同,而对children做不同的处理,使得children规范化

simpleNormalizeChildren方法调用的场景是render函数为编译生成的,理论上编译生成的children已经是vNode类型,但有一个例外,就是函数式组件返回的是一个数组而不是一个根节点,所以通过Array.prototype.concat将函数拍平

normalizeChildren的调用场景为render函数为用户定义,当children只有一个节点的时候,Vue从接口层面允许用户把children写成基础类型用来创建简单的文本节点

另一个场景则是当编译slot、v-for的时候回产生嵌套数组的情况,则会调用normalizeArray为递归,目的是将children变为一维数组