VUE源码笔记之createElement

2,368 阅读1分钟

这次开始学习vue源码的知识,并且把学习的内容都写成笔记,方便以后复习。

这几节最后应该合并起来看,串联后是实现数据驱动的代码,写好了会补上链接

一、VUE源码笔记之new Vue
二、VUE源码笔记之$mount实例挂载
三、VUE源码笔记之render
四、VUE源码笔记之createElement

本节的内容是:了解createElement做了什么。

createElement

Vue.js 利用 createElement 方法创建 VNode,它定义在 src/core/vdom/create-elemenet.js 中:

createElement方法先对 _createElement 做了一层封装,对不传data的情况做了一层处理,然后调用了 _createElement 来创建VNode。

目前来说, _createElement 比较重要的点是normalizeChildren(children) 和 simpleNormalizeChildren(children)方法。

simpleNormalizeChildren把二维数组拍平。([1,2,[3,4],5])

normalizeChildren会递归调用把多维数组拍平。

经过对 children 的规范化,children 变成了一个类型为 VNode 的 Array。

回到 createElement 函数,规范化 children 后,接下来会去创建一个 VNode 的实例:

这里先对 tag 做判断,如果是 string 类型,则接着判断如果是内置的一些节点,则直接创建一个普通 VNode,如果是为已注册的组件名,则通过 createComponent 创建一个组件类型的 VNode,否则创建一个未知的标签的 VNode。 如果是 tag 一个 Component 类型,则直接调用 createComponent 创建一个组件类型的 VNode 节点。

所以vm._render就是经过这些处理,返回了一个VNode节点,然后执行 _update 方法,下面就开始分析 _update方法。

参考

Vue.js 技术揭秘