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

我将一如既往用每篇文章的 title 作为研究问题的主要方向
在这里插入图片描述

虚拟dom(简称:vdom) 和渲染函数(简称:h函数) 究竟有何关系?

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

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

虚拟dom(vnode)和渲染函数(h函数)的关系_第1张图片
好吧好吧,扯远了,扯远了。赶紧回归正题。在正式了解vdom之前,我们看一下真实的DOM结构

在这里插入图片描述

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

让我们看一下js对象是如何表达上的DOM层次以及属性的,下面的js对象就是我们的vnode
虚拟dom(vnode)和渲染函数(h函数)的关系_第2张图片
这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上

你可能感兴趣的:(Vue.js,vue,javascript,html5)