虚拟dom(vnode)和渲染函数(h函数)的关系

我将一如既往用每篇文章的 title 作为研究问题的主要方向

虚拟dom（简称：vdom） 和渲染函数(简称：h函数) 究竟有何关系？

我将vue中vdom和diff算法分为3个方向，本篇主要研究第1个方向（如上），3篇文章循序渐进依次进行解读。

能看到vdom，相信屏幕前的你，多半已经是一名成熟的cv工程师了。看到这张图，是不是感觉更熟了（斜眼笑）

好吧好吧，扯远了，扯远了。赶紧回归正题。在正式了解vdom之前，我们看一下真实的DOM结构

vnode呢，作为一个虚拟的DOM节点，它是用js中对象的方式来进行描述真实的DOM层次结构，DOM的的一切属性（例如：行内样式、类名等），都在vdom中有着相对应的属性。

让我们看一下js对象是如何表达上的DOM层次以及属性的，下面的js对象就是我们的vnode

这6个属性children，data，elm，key，sel，text 是固有6个属性
data中表达的是DOM元素的类名，样式信息等等

elm表示是否挂载到了真实的DOM，若没有挂载，则显示undefined
key是data中的一部分，只是被单独出来了，v-for中的key应该都使用过
sel是selector的简写，表示的挂载的DOM节点
text是文本信息

diff算法（精细化比较）也是应用在新旧vdom之间的，diff会算出如何让最小量的更新，最后会反映到真实的DOM上