这次开始学习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方法。