Vue虚拟节点Vnode过程

[terribleness]

上一节我们分析了“Vue的编译过程：template、AST、Render过程”，通过这一步之后，Vue把template模板编译成了render可移植性函数。
这一节我们分析“Vue的虚拟节点：VNode、patch算法”。这一部分的目的是把render函数生成vnode虚拟节点，在更新时找到最小变化的dom结点，生成新的dom树。
我们看到’web/runtime.js’文件中，如下

vm.options.render存储了执行生成的render函数生成，接下来就是执行$mount函数了，我们把这一节分为两部分“Vnode”和“patch”，Vnode部分是分析render如何生成虚拟dom树，patch部分是如何获得新的dom。
Vnode
如上图我们进入’lifecycle.js’中查看mountComponet函数如下：

红框这句就包含了vnode和path两部分，其中vm._render是生成vnode的，vm._update是包含patch的。我们先查看vm._render函数内容。如下：

我们看到红框这句vnode = render.call（vm._renderProxy，vm.$createElement），我们先来看看render函数，如下：

其实render生成vnode的过程就是执行render函数，其中_c，_v，_s都是第一节“Vue扩展实例方法”定义好的，我们现在分别看看_c，_v，_s函数的内容，在’instance/render.js’函数中。

_s函数内容就是转换字符串过程

在’shared/utils’中能找到工具方法，如下：

_v函数是生成一个vnode结点

在’core/vdom/vnode.js’能找到方法，如下：

Vnode的内容时什么嗯，我们继续看。Vnode结构就是实际上一个html中元素可能存在的属性集合。如下：

_c就是生成一个vnode树

在第一个参数是html标签内容，第二个参数是vnode数组。所有最终生成的vnode树结构如下：

这就生成vnode树，我们可以吧前后过程联系起来，从“tempalte”转化为“ast抽象语法树”转化为“render函数”转化为“vnode虚拟树”过程用实际数据结构表现出来，如下：

第一步元素template字符串：

第二步ast抽象语法树：

第三步render函数：

第四步vnode虚拟dom树：

总结：
清晰描述了“tempalte”转化为“ast抽象语法树”转化为“render函数”转化为“vnode虚拟树”的过程