02.尚硅谷Vue源码解析之虚拟DOM和diff算法/视频/03-尚硅谷-虚拟DOM和diff算法-虚拟DOM和h函数

这节课我们来学习虚拟DOM和H函数。虚拟盗墓呢，我们在前面的课程当中呢，已经有所了解了。它就是一个把真实对象啊，然后呢，它要描述成JS对象啊，这样的一个形式，所以什么是虚拟DOM呢？就是用javascript对象来描述DOM的层次结构。啊，那么你会发现在真实do当中，它是div里面有H3和UL2个节点，那么这里头呢，就是div，它的children这个属性当中就有H3和UL2个对象。好，那么ul当中呢，又有三个力，这个ul当中的children准属性当中呢，是不是又有一个数组，这个数组当中呢，是三个力标签。那么这样的形式啊，这样嵌套的形式就是sell data children，这里头又是sell data children，这里头又是sell data children啊，但是它没有children，它是text，就表示它里头是文字了啊，那么这样的形式呢，实际上就呃用JS对象的这样的一个，呃就是对象来描述出了一个。

Do的一个层次结构，那么DOM中拥有的一切属性呢？都在虚拟盗墓中呢？有对应的属性，比如我们可以看见这个class等于box啊，那么这个就是真实盗墓的属性，真实盗墓的属性呢，就是类名。啊，那除了class之外呢，还可能有ID，还可能有h ref对吧，还可能有src属性等等，那么这些东西呢，都会在咱们虚拟弹中呢，诶有相应的描述啊，会有相应描述，也就是说相当于这个东西到这边信息呢，是不丢失的，信息是不丢失的，只不过呢，换了一种表示法而已。那么为什么要有虚拟盗墓呢？其实原因呢，就是一句话。

咱们的diff啊，就是精细化啊，最小量更新这个算法，它是发生在虚拟DOM上的，也就是说节点和节点进行最小化比较，并不是真实盗墓啊，一定记住就是。新的虚拟盗墓和老的虚拟盗墓来进行diff啊来进行diff，哎，就是精细化比较来算出应该如何最小量更新，最后呢，反映到真正的道目上，那么这句话呢啊，咱们先看这个代码演示吧，这是老道目对吧，但是这个老盗墓由于PPT的呃范围限制，所以老师在这里呢，把这个data塔属性，还有这里的data塔属性啊都给删掉了。哎，那么啊，为了这个PPT的板式就是能显示全啊，它diff变成这样，这里多了个SPA，然后这里多了一个雪碧，看出来了吗？对吧，这里就变成了一个雪碧啊，那么实际上呢。

呃，就是它这种dif算法是发生在虚拟盗墓之间的啊，就是老的虚拟盗墓和新的虚拟盗墓来进行比较，而不是老的盗墓和新的盗墓，也不是新的盗墓和老的虚拟盗墓，也不是新的虚拟盗墓和老的盗墓啊，大家一定要记住是新的虚拟盗墓哎，就这样的和老的虚拟盗墓来进行地府。啊，精细化比较，那就是说这个对象要和这个对象比比哪不一样啊，对吧？那么实际上那你会发现javascript啊，他去比较自己的这个对象类型，总比去比较那种DOM节点那种形式要简单一点，对吧？来算出如何最小量更新，最后呢，再把这个啊反映到真正道上，咱们在之前的第一节课上已经说了，我们不可能把原来这个div中的所有内容都拆掉，就如同我们装修房子似的，对吧？我们明明买买了新茶几的事情就可以解决了，我不可能说都给他都拆掉。

啊，所以呢，这样的话，我们他就会进行精细化比较，诶，发现这个SPA是新的，好，那这个时候他就会命令咱们的do进行aend child操作，啊aend child就是追加一个新的节点，当然它需要先create element。对吧，然后又发现这个雪碧是新的，它就会先create element，然后啊追加节点啊，当然不一定是追加，可能是insert before啊，咱们后面会讲它的机理对吧？哎，所以说一定记住啊，就是diff发生在虚拟DOM上的啊，那么不要以为这个知识简单啊，但是呃，老师呢，其实在之前啊，也会去进行一些面试啊，面试一些程序员。那么我们在面试程序员的时候，诶也会去问啊，比如说我就会问程序员说地步算法你既然这么熟悉，那我就问你一个问题，地步算法是发生在虚盗墓上的还是盗墓上的啊，然后程序员就支支吾吾的，可能就不是特别明白啊，大家一定要记住是发生在虚拟盗墓上的啊。

好，那么这个讲完之后呢，这个时候大家一定要注意啊，就是咱们的新的程序员啊，啊，其实在这里会有一个特别大的困惑啊，就是这件事。就是本次课呢，咱们是不研究盗墓如何变为虚拟盗墓的，就是这是真正的盗墓结构，它如何变成这个。诶，那有的初学者就会很关心这个箭头啊，但是呢，实际上从这个变成这个呀，它是另一个知识，它是属于模板编译的范畴。我们可以预告一下啊，在以后咱们上硅谷推出的课程当中呢，诶，我们会把模板编译这个内容呢，也会强调。在之前啊，诶，我们也推出了一个。源码探秘的一个课程，那个探秘的课程呢，叫做马大模板引擎。

哎，Master大师啊，模板引擎，那么大家有兴趣的话，可以去把这个视频也是邵山欢老师啊，就是我来讲的这个，那这个视频大家可以去看一看，它其实呢，里头就有一点点啊，涉及到了模板编译的一些知识，就是HTML是怎么样变成这种这种形式的啊，那这个是不是我们这节课研究的。大家一定要注意，就是我们这次课不涉及如何把HTML变成这种普通对象啊，变成这种虚拟do的这种形式，明白吧，哎，是不涉及的，那你说老师既然不涉及这个知识，我们讲什么知识啊，我们要讲什么知识呢？哎，我们来看一下我们要讲什么知识，我们研究的目的呢有三个啊，第一个研究的内容呢，是虚拟盗墓如何被渲染产生的，那么答案告诉你了啊，它如何被渲染产生的呢？它是渲染函数叫H函数产生的。

啊，所以我们要手写H函数，那你说老师H函数不就是用来把这个变成这个吗？不是啊，一会儿我们马上就讲H函数啊，就这个视频我们就会介介绍H函数，一会儿你就知道了。啊，那H函数其实它的意义很重大啊，一会儿你就知道了。第二，我们要研究diff算法，Diff算法很好理解啊，就是两个虚拟盗墓如何进行差异化比较啊。第三就是虚拟盗墓，如何通过dif变成真正盗墓的，哎，就是虚拟盗墓你比来比去，咱们回退一下，就是你比来比去对吧，他要能变成真正的盗墓呀，啊，那事实上虚拟盗墓变回真正盗墓呢，它的算法是涵盖在地府里面的。啊，明白吗？所以说你只要把第一步算法学明白，诶，那你就知道如何变回了，那你现在唯一不知道的就是HTML怎么变成。啊，虚拟盗墓的啊，所以咱们这个课是很负责任的，它是一个体系啊连载的体系，所以呢，我们把这次啊，啊这这次的这个咱们这个虚拟盗墓和地步算法的这个这个课程的啊，系列课程中你会什么，你将学会什么和你还不会什么，我们都给你说清楚好吧，哎，好，那我们就正式来看一下H函数啊。

H啊，这个单词没有任何的一个意义，它就是咱们拿包的作者啊，去使用的这样的一个啊字母啊，它就将这个函数就叫H，所以大家不用去想这个H到底是哪个单词的意思啊，它就叫H。好，H函数用来干嘛呢？用来产生虚拟节点的啊，H函数用来产生虚拟节点，那比如说我们这样调用H函数。啊，H里头呢，有两个逗号，两个逗号呢，就说明这里头有三个参数，这是第一个参数，这是第二个参数，这是第三个参数，那第一个参数第二个参数，第三个参数。那这样的话呢，你就其实大概能看出来，我们就能创建出一个虚拟节点。

啊，那这个虚拟节点实际上对应的呢，就是一个真正的A标签，这就是一个真正的A标签，对吧，一个A-A啊这样的。那咱们对着看，也就是说H函数的第一个参数呢，就是标签的名字，这个标签是什么？是标是A标签啊，还是div标签啊，是ul啊，还是力啊，对吧？哎，那这里是字符串，那这样的话呢，它就会变成虚拟节点中的cell这个属性值啊，Cell它这里这个A，它就变成这个A了。好，第二个参数呢，它就是一个对象，那我A标签上要有很瑞属性，就h ref属性啊，表示超链接啊，那这个h ref呢，它不是独立的对象啊，大家注意看，不是独立的对象。而是他又被包在了一个对象里，这个对象的名字呢，叫pro，叫pro pro实际上就是英语，哎，啊，就是properties啊，Proper，哎，Properties啊，就是属性的意思啊，就这样子的。

属性的意思，那这个属性这个里头呢，有HRF，那它呢就放到了data这个属性中。对吧，好，那么第三个参数上硅谷呢，就被写在了这里。所以呢，这个就是一个虚拟节点啊，它就是一个虚拟节点，虚拟节点呢，它这个里头有一个V啊，它的名字叫vinode v呢就是单词virtual v叫virtual啊，V叫虚拟的啊，比如说咱们平时知道那个V技术，就是那戴个眼镜，这叫叫virtual virtual啊reality对吧，就是虚拟现实啊，就是说多了就是虚拟节点，那实际上虚拟节点呢，就是由H函数变过来的。对吧，那你这个时候肯定会问老师，不对呀，那真正的盗墓是怎么通过H函数变成它的呀？哎，这个咱们是刚才已经解释了啊，咱们前一个幻灯片已经解释了，苦口婆心的解释了，是吧？就是如何从盗墓变成虚拟盗墓，不是这节课研究的内容，大家一定要记住啊，它属于模板编译的范畴啊，那咱们今天呢，就直接从H函数开始讲起，然后讲DF，对吧？

好，那么咱们继续啊，虚拟节点有哪些属性，大家注意看，虚拟节点呢，咱们其实刚才属性没写全，咱们刚才是不是见到了data，见到了cell和text对吧。哎，那实际上虚拟节点的属性呢啊，它还有三个，第一个children准，Children准属性表示的是它的子元素啊，如果是安低半的呢，那就表示它没有子元素对吧？哎，没有子元素。第二个呢，就是data data塔，咱们刚才遇见了，就是它身上呢啊，什么属性啊，样式啊，就会写在data塔中，Elm呢，表示的是这个元素对应的真正的盗墓节点啊，如果是安范的，就表示这个虚拟DOM还没有上树。

就表示这个虚拟盗墓呢，还没有上树，K就表示这个节点的唯一标识。啊，如果你用过be，那一定知道key是干嘛的，对吧？就是在V-four里要加个key啊，啊服务于最小更新的cell表示选择器啊表示的是c like选择器，Text表示的是文字。好，那光说不练假把式啊，我们现在赶紧去看一下，真正的去练一下啊，看一下好，我们来到了咱们刚刚的这个布置的这个环境当中啊，咱们不是调了一个它的初始DEMO吗？好，我们把这个呃引包留下，然后其他所有语句都删掉。然后引爆语句呢，我们也把分号补上对吧。哎，OK，那么这样的话呢，我们就啊，可以利用这个H函数来创建虚拟节点，我们创建创建虚拟节点好比如说叫my veno1就H对吧，我们可以创建一个A标签啊，然后它的pros就它的属性，属性有什么呢？有HRF，然后它这个属性呢，是HTTP3W点艾特硅谷点com对吧。

好，那么这样的话呢，就是上硅谷，那这样的话呢，我们的H函数你注意啊，并不会在页面上真正的产生这个A标签啊，诶，这函数没有这么牛啊，没有这么牛，哎，这函数不会真正的在页面上产生A标签，但是呢，它能输出虚拟节点，咱们来看一下log一下啊，看一下8080端口。哎，那么这个时候实际上啊，咱们需要提示一下大家，就是默认情况下，它这底下有好多黄颜色的一个啊警告，这些黄颜色的警告呢，实际上都是因为咱们现在配的环境是没法读这个map啊，就这个映射文件的，那至于映射文件点map格式的文件是干嘛的啊，如果实在不知道，没有关系，它跟本节课的内容啊没有关系，它是source map文件啊，那咱们就眼不见心不烦，我们把这个过滤器就是过滤器打开，把这个word这个勾去掉。

哎，不要看这警告不就行了吗，对吧。好了，那这个时候呢，大家有没有看见我们现在这是就有一个虚拟节点，虚拟节点children准案例范说明这个A标签呢，没有子节点对吧，Data呢，就是你刚才写的这个pro啊，这个东西好，Elm是安范说明这个节点现在没有上述。Key是安迪范，说明没有加key cell选择器是A标签对吧？哎，那么T是上硅谷是这样子的。那现在的话，实际上你就看见这个虚拟节点，但是呢，你会发现很索然无味，就是这个虚拟节点现在呢，并没有显示在页面上啊，就很索然无味，所以这个时候老师就告诉大家怎么样给它显示在页面上啊，那这个时候呢，我们就需要创建出派函数。啊，派函数是干嘛的呢？我们在后面的视频中介绍，咱们先预告一下派视频非常的有用，它就是递步算法的核心函数啊，咱们在后续就这个视频不讲马上啊，哎，就马上跟着就讲好，那我们现在呢，就可以用initt函数。

啊，初始化的patch啊，当然patch它不变，我们可以看的，这个也可以看出来，对吧？好init里头呢，要把模块跟上，把这个类名模块放里头，Pro模块放里头，然后样式模块放里头，还有这个事件监听模块我们要放里头啊，都要放里头，这样产生的派置函数。那么PA函数呢，就可以服务于让虚拟节点上述对吧？哎，我们现在写一下备注，让虚拟节点上述，怎么上述呢，我们就可以调用patch啊，但是呢，我们首先第一步要先得到那个container。咱们不是。还有印象吗？咱们3W这个里头是不是这放了一个container啊。对吧，我们用ID，呃，我们用ID的形式document给IID的形式我们得到它。

然后我们第一个参数放这个container，第二个参数呢，放虚拟节点。好，这个时候看走是不是就上来了，并且这个超链接是真的能点啊，一点你看就来到上硅谷了，对吧，那这个时候你会发现啊，真正的用H函数我们创建了一个虚拟节点，而这个虚拟节点呢，可以用PA上述啊，咱们预告一下我们后续的这个小视频啊，就是咱们这次课的小视频。就会给大家讲解拍摄函数的底层机理，为什么虚拟节点能上数，所以这个呢，咱们大家可以啊，慢慢去听咱们这个课，好，那这个时候一点上硅谷，你发没发现它并不是在新的啊，并不是在新的标签页中弹出的，那这个时候对就可以再去给它加一个pro。对吧，它这pro咱们可以换行啊，可以再加一个pro，它这有h ref不够对，是不是还可以加一个target为下划线blank呀？啊这个大家应该能理解，新窗口中打开，它这个就在新窗口中打开了，对吧？那它真实上述的时候，它是不是就变成了一个target的blank属性了。

对吧，哎，就很简单啊，所以这个虚拟节点就创建出来了。很有意思吧，诶，虚拟节点上述啊，好，那这个买vino的E就可以不不输出它了，因为输出它没什么意思，你也知道它实际上输出的虚拟节点呢，就是把H函数这几个参数放到不同的属性中了，对吧？哎，没什么意思啊，好，那这个时候我们再去创建另一个虚拟节点，比如说my me not，二咱们来看一下，比如说这个时候我们就可以做一个div啊，Div它的没有任何的属性。看见了吗？没有任何属性，那我就可以留个空对象，哎，然后再写个我是一个盒子。好，那这样的话，我们让二号节点上树啊，哎，它一个容器只能让一个虚拟节点上树哦，除非它有内嵌的啊，咱们一会儿讲咱们现在让二号节点上树对吧，那这样的话，你看这个二号节点看他能不能上树啊刷新。

刷新诶这个他就上述了啊，那他身上没有类名，如果要有类名的话呢，这块要怎么写，对这块还需要去写一个class啊，然后对象比如说box为true这样写啊，有box属性为true，哎，就说明它有box属性。啊，这样类面就上来了，对吧，当然如果没有第二个属性，你这个大括号也可以删掉，就它可以直接div逗号跟上，那这样的话他也能够识别啊，是非常非常的好用的，这个大家能理解吧，对吧？哎，虚拟界的上述啊是非常的有意思的。好，我们再回到PPT当中啊，那么接下来PPT当中呢，这块介绍的是最有用的一个知识，这块是非常重要啊，这个知识可以说是咱们这个小阶段非常非常重要的一个啊，非常非常重要的这样的一个。

知识啊，就是H函数呢，是可以嵌套的啊，是可以嵌套使用的，那么嵌套使用H函数是什么意思？相信聪明的你已经看出来了，Ul没有属性对吧？然后它第三个参数不是文字，是个数组。它第三个参数不是个文字，它是个数组。发现了吗？不是个文字，它是个数组，那么这个时候就实际上就表示这个ul里头有三个力啊，而这三个力呢，都是H函数。看见了吗？那这样的话呢，你就会发现它就能创建出这样的虚拟盗墓数，哎，它就相当于一个H函数，就一个H函数，它能产生v not。啊，能产生虚拟节点对吧，那么虚拟节点一嵌套就是H函数一嵌套用它是不是就能产生啊virtual DOM呀，哎，就能产生虚拟DOM了啊就简称v do啊就虚拟DOM virtual DOM是这样子的。哎，虚拟盗墓数，那咱们现在呢，光说不练加把式，赶紧练一练，对吧，咱们试一试，那咱们现在呢，就是虚拟节点三啊，他就可以去写成嵌套的形式，比如说是个ululu，没有属性，这个大括号可以不写，里头放个数组，数组里头呢继续力啊，对吧？哎，然后这块就可以写，比如说苹果逗号西瓜对吧，哎，香蕉。

啊，然后呃，这叫火龙果，诶OK了，诶怎么写成回龙观了啊好OK。那我们现在把它写成三，那你看他就上树了，Ul哩哩哩哩，是不是就上树了，没问题吧，哎，是这样子玩的啊，那么实际上你这个千万不要写，不要忘记啊，要里头要套H函数，你说老师我就不套啊，我就写成这个这样。对吧，你看我数组中是四个属性，哎，那这样不行啊，这样它这个力就出不来，不对啊啊，所以说一定里头要套H函数，这样写是对的，没有任何问题。

啊，大家明白了吗？那如果说层次再高一点的话，比如说这个相交里头再有层次，对，那再套H啊不对，再套数组对吧，那它再有层次啊，它子元素，那就再套这个，再套一个，就这个里头再有子元素，这个力里头，比如说这个力里头再有一个呃，Div它是可以的，就是力里再有div是允许的呀。对吧，哎，然后这div里头呢，再有子元素。看见了吗？哎，然后这里头呢有P。好有P，那比如说这里呢，就是嗯，这里这这这这这里写什么呀，对吧，哎，咱们就随便写吧，写个哈哈嘻嘻吧。也不知道写啥了啊，就这意思，那现在的话，你看它结构就成这样了。啊，那它什么结构呢？就是ul里头四个粒是四个粒吧，没问题吧，然后四个粒当中呢，其中前几个粒都是很简单的啊苹果西瓜这个marker是先导小符号，好，那这个力是比较奇怪的，这个力里头有个div没问题吧，然后div展开之后呢，这里头又有哈哈和西西两个P。

你看哈哈和嘻嘻这两个P。发现了吗？是不是没有没问题吧，这个没有问题吧，哎，是这样，所以大家一定要去练会啊这个层次结构啊，练会这个层次结构对吧？哎，把它给弄上去啊，那么如果一个力它只有一个子元素，比如说这个力的子元素是个SPA啊，那就不用写数组了。哎，那他可以直接写个HSPA。看见没有，哎，火龙果啊，可以直接写个死SPA，那这样的话，这个力它的子元素就死SPA，那它如果有第二个，就如果有第二个参数对吧？哎，火龙果，然后再来一个榴莲啊，那这个时候呢，对不起，他就报错了，你看他没有火龙果了，他就必须要有数组。听懂了吗？就说它的子元素如果只有一个啊，只有一个子元素，那这个时候数组是可以省略的，诶诶啊，数组是可以省略的啊，如果只有一个。

那数组是可以上去，但是如果有俩啊，你看有俩子SPA这里头它有两个子元素，俩子半嘛。对吧？哎，换成P可能更清晰一点啊，换成P更清楚一点，哎，那就这样，那他如果只有一个子元素，那他连数组都可以不要，当然你留一个数组也可以啊，对吧？所以说H函数的用法很活啊，H函数那这个案例大家一定要练一练，就这个嵌套的这个案例一定要练一练啊，我们下个视频就要告诉大家H函数的机理是什么，其实特别简单，它有一个递归的那种感觉。啊，它有一个递归的感觉，下个函数我们就告诉大家H函数，咱们就手写H函数，明白吗？不要怕啊，不要怕，所以这个PPT就讲的很深，就是H函数用法很活，老师会给大家演示一下H函数的多种用法，实际上已经给你演示了啊，已经给你演示出来了，我们把这个截图软件打开，然后给大家截个屏，咱们再放在PPT上，也当做咱们的一个学习资料，对吧？哎，用法很活，就是它可以省略这个参数。

啊，比如说你这个苹果可以有个参数对吧，有个空对象，这块可以没有空对象。啊对吧，哎，然后呢，啊，他这也可以没有数组，也可以有数组啊，就很活，所以说这一个案例就告诉你了，他有多么多么活啊，给你粘到PPT上，所以诶，这函数到底多活，你得自己去体验一下，自己去体验一下就行了，好吧，哎，自己体验一下。好了，那这个呢，就是咱们现在录的这个小视频的啊，全部的知识，大家咱们来复习一下，咱们这个小视频讲了什么知识，咱们这个小视频讲的知识是不是就是H函数到底怎么用啊，对吧，就是这一个知识啊，然后呢，之前。咱们就聊了聊，到底什么是虚拟节点，为什么要虚拟do，因为dif是在虚拟do上面发生的，对吧？诶，然后最重要的一个知识点就是你要知道我们要学什么，我们要学的不是如何把真正盗变成虚拟do的啊，而是手动调用H函数，事实上H函数。

不用自己写呀，哎，这函数不用咱们人类自己写，程序员自己写，它是不是由vuee自动识别你的模板引擎啊，咱们可以告诉大家，就是它实际上你的V-four都会被翻译成H函数。大家明白吗？就比如说你这里写了一个ul-ul啊，然后你这里不是写了一个力。对吧，然后V-for嘛，对吧，然后他实际上做模板编译的时候，它会把这几个V-for的力呢，换成数组的嵌套形式的H函数。明白吗？H函数啊，当然外层有div，有UR都会被变成H函数啊，所以说这是咱们后面啊，咱们不是这次视频的课的内容，大家只要跟着咱们上硅谷来学习，是一定能学习出来的，哎，他就变成H函数，而而H函数的结果呢，是虚拟节点对吧？啊，我们刚才忘了把这个虚拟三号节点给他看一看了啊，咱们来看一下三号节点，三号节点的这个它是这样的，十准中是不是有四个节点，因为它有四个力呀。

啊，差点忘了啊对，差点忘了让他的em是ul不是安迪棒了，因为它上树了呀，一碰它，你看它变蓝了。对吧？然后children里头呢，是这个利利利利，其中第三个利，它是不是又有children啊，发现了吗？他就一层一层children套上去，所以这就是虚拟盗墓，这就是虚拟盗墓，叫虚拟盗墓，虚拟盗墓数对吧？最后一个这个三，这不也有个例吗？这不是个P嘛，唯一的这个子节点吗？对吧？而每一个咱们单独拿出来，这每一个是不是就是一个vno的，那vno的被children润属性嵌套了啊，被children润属性嵌套出来就成了虚拟盗墓，好吧，希望大家能明白啊好，我们这个视频就录制到这里，请同学们多多的啊，加以练习。