02.尚硅谷Vue源码解析之虚拟DOM和diff算法/视频/10-尚硅谷-虚拟DOM和diff算法-手写新旧节点text的不同情况

这节课我们来学习手写新旧节点text的不同情况啊，那么这个就很简单了，就是我们现在呢啊，你看假设，比如说一开始section，然后是呃，没没有这个data，然后里头有一堆子节点，好，然后现在呢，我要给它变成文字，对吧，你好。我点击按钮的时候是没有用的。发现没有点击没有用，为啥？因为我们没有写呀。啊，我们之前的这块一直没有写呀。所以咱们在现在这节课开始呢，就要去写这个大衣服里面的语句了。好，那我们就开始啊，首先呢，咱们就需要把刚才那个图打开。哎，这个图打开，那现在是不是就要开始判断第一件事，就是他和他是不是同一个对象。那如果是，就什么都不做。所以这个就很简单啊，那我们现在就要判断判断新旧。哎，新旧虚拟啊，Venode是否是同一个对象，所以就如果old的veno的它在内存中完全和new windowno的相等，那么什么都不做。

啊，那么什么都不做就行了。但是这个相等指的是在内存中相等，明白吗？哎，而并不是说你把这个数组超过了啊，数组超过来的不相等，它内存中不是同一个对象啊，什么叫同一个对象？就是WINDOWNO1和WINDOWNOTE1是一样的。或者这块干脆就把咪的一传过来了，好吧，哎，那这种情况呢，很少见啊，那我们就不测试了。好，然后接下来的话呢，就要开始啊，就是这儿就是要判断new v node有没有text的属性。啊，这个图一定要按照这个图写，不按这个图写就乱了，所以这个时候我们要去判断咱们的新lino的有没有AG的属性，所以这很好简答啊，就是你的new type new比no的有没有T属性，它不是按范的。啊，不是安迪范的。

对吧，就有没有T的属性。啊，然后呢，并且就是new we know的children，就是他没有儿子啊。Children。哎，嗯，等于等于安迪范的，或者它是一个空数组。的认识。等于等于零啊这样写。对吧，哎，这样的啊，且这样这种情况，那咱们现在就说一下，就是啊命中啊就是命中咪I闹心，咪I闹的有。对吧，哎，或者是别叫命中了，就是新bno的有T属性。啊，那咱们现在点一下应该能输出。点一下是不是输出了。哎，输出了。啊，输出了。我们把之前的这个conso log给它删掉啊。哎，O点给给他删掉。

太看着就麻烦是吧。好，咱们现在再来一次点，诶，OK了，新lino的有。啊，这样子的。哎，所以说他是什么意思呢，就是说他自己要有T属性，并且呢，他的儿子是安迪范啊，儿子呢，Les是零，就说他没有儿子。还是文字？啊，是这样子的一个意思啊，诶对不起，但是这里啊，咱们刚才看错，但是两边代码是一样的，你发现没有这个代码和这个代码是一样的衣服啊。就行了。啊，那这个时候的话，我们来看。怎么办呢？看图啊，对吧，一切都是这个图，咱们现在说的是非常。重要的那有有的时候怎么办，对吧？哎，没有的时候怎么办啊，所以咱们把这个L给它加上。哎，新节点有T属性，新节点没有。他手枪。是吧，哎，我们把这个备注也写一下啊。

没有。啊好，那有的话怎么办呢？那是不是要比较新的，和这个是否相同。明白吧，哎，那叫判断，就不用看秋准老基点的秋准情况了。啊，我们非常霸气，就直接比它的是不是和old的veno的T的相同？是吧，如果相同的话，是不是什么都不做呀？啊，什么都不做，那其实就不用去写了，直接写不同不就行了吗？不同的话，那是不是就直接把em就当前你这个这个em啊，就是老节点的em啊。Old veno的的elm中的inner text改变为new text呀。对吧，不就行了吗。对吧？不就让old wenode的这个elm中的inner text改变为我们new windownode中的这个text不就行了吗？就很简单。

啊，咱们现在说句题外话，就是我这个时候没有大家有没有发现，并没有给他再单独的去提出一个函数叫派vino的对吧？哎，但但是人家已经啊，已经提了一下，咱们一会告诉大家提的目的是什么，因为提的目的呢，它是方便递归，我们一会再把它提出去，别着急啊，一会儿再给他提出去。我们先就着这if写啊，先说句题外话，再说一遍，就是大家刚才看了官方文件当中啊，就人家写的他这块的if呢，是单独提成了一个JS文件，叫pavno的，就不是在写在这个函数中了，我们一会儿再去写，因为那个是方便递归的，谁递归五角星在递归。啊，一会儿再说，所以这样写就行了。对吧，哎，那么也就是说判断就是如果新的虚拟节点啊中的text和老的虚拟节点。节点的T的不同对吧，那么直接让新的T的啊，新的tag的写入咱们老的这个elm中即可。

啊，那么如果老的em中是children啊，就是说是DOM节点，那么也会立即消失掉了。因为我inner text改了，什么都改了呀，所以这个时候咱们看一下我一点是不是变成你好了。发现了吗？原来三个P没了，PVP一点是不是就没了？啊，所以这就编程，这就是编程，就是这一层逻辑就跑通了。这一层逻辑就跑通了。啊，但是你你的长路漫漫，你现在刚跑通啊，你现在刚跑通这里。哎，这边跑通了，但是你这还没有跑通，没有这块你还没有写。没有的话，你是不是还需要用old video，那这个红的是简单的啊，我们把这个红的写了，那这个红的写了是什么意思呢？就是说老的也没有children。

啊，然后新的呢，也也新的有children。能明白吗？新的有children，然后老的呢？是呃，没有children，这是最简单的。再说一遍，就是老的没有children。对吧，哎，咱们一开始写一下啊，我是老的啊，老的这个盗，我就是一个破文字，破文字啊，我不是子节点，我没有子节点，没有子节点。对吧，就一上来咱们就是一个破文字。啊，然后呢，这种情况咱们已经解解解解决了呀。这种情况已经解决了，就是一点，它不是新的视频，但是新的现在是节点。懂了吧，哎，新的现在式节点大家能理解这个逻辑了吧，比如说这个P就相当于给他换过来了哈。啊，然后吸吸行。换过来了，哎，然后在这随便写写啊。看到了吗？但是这种情况你一点是没有用的，因为你刚才else没有写呀。

那这种情况其实呢，它又分两种子情况，一种是它原来是文字，那是特简单，直接把它剃掉是不是就行了。这个大家能理解对吧，就是咱们刚才的这个图上的这种情况啊，这个图上的这种情况直接给他剃掉。哎，不就行了吗？直接给他剃掉不就行了吗？然后还有一种情况是什么，是不是就是对，就是这也是节点，这也是节点，然后可能还交换一下顺序什么，加上K，那这个时候是不是就真的给特别复杂给写这个五角星了啊，就是最小能更新了这块了。明白吗？就所以说这个是说人话的，它是按照这个逻辑走的，这张图你得好好算，好好想想，甚至你要自己在process on这个这个工具上，你要自己把这个图能画出来，那你就真的很牛，好吧，诶，就真的很牛。啊，所以说咱们现在要看原来是文字啊，那这种情况怎么办？哎，所以这个时候就没有对吧？哎，那我们现在要判断老的有没有children准啊，判断老的有没有children准。

哎，就行了啊，就是如果咱们现在这个老的啊，就是old we not判断children吧，对吧，哎，有没有children的children。啊，然后不是。按地板的。哎，然后呢，并且old windowno children大于零。哎，那就说明老的有children。对吧，那么此时就是最复杂的情况。啊，就是新老都有，此时就是最复杂的情况，就是新老都有children。哎，新老都有children，那咱们先别写，这种情况咱们先去写，叫老的有children，是不是新的没有啊。哎，对不起啊，写错了，这是老的没有车，因为这L嘛。而新的是不是啊，这新的是有还是没有啊，对新的是不是有children。

对吧，哎，新的有children啊，老的没有新的有，那这种情况也简单，就这种情况是不是第一步要清空，第二步追加呀。能理解吗？哎，第一步清空，第二步追加。就行了。哎，就完事了，所以追加的话很简单，咱们追加咱们刚才不是写了一个create element吗？我要创建出来，我就需要把这个呃呃，新的这个vno给创建出来吗。啊，但是他的children。对吧，因为两个节点是同一个节点，我要给它创建出来，创建出来之后我要给他加进去。啊，把这个儿子加进去，那这个时候。你注意这个children是什么？是不是子节点？我要便利吧？明白吧，这个时候要便利。对吧，哎，我要一个一个便利啊，因为我create element，它这里只接受一个虚拟节点。啊，那这个是什么意思呢？因为这个是weno的点children，它会返回。它会返回一个真正的盗墓元素。

对吧，那这个盗墓元素它便利，它不是这里头会有一个DV吗？还记得吗？咱们之前写的create element里头。对吧，哎，那这个时候就是这个新的do，那这个do的话，我们是不是就可以把它写里头啊。对吧，哎，就老的没有children，新的有children，那是不是就是让咱们这个old的weno的这个elm是不是就等于这个do呀？哎，不对，别等于这个do，是不是就可以去啊，End child。这个盗墓啊。对吧，那咱们先来看一下，这不是破文字吗？我一点报错了。啊，他说看到瑞property of，看看是哪报错了。哎，这个veno的没有cell对吧？哎，你这个vno的没有你掉那个时候这个children，因为你这个children是什么，它是数组啊。对吧，哎，数组，那你这个时候不能把B都搁进去。啊，我一点的话，这安迪范不就上来了吗？所以这个时候它是一个便利过程。啊，就是。里头递归是他递归，但是这个时候你需要把这个节点给遍历出来。

能理解吗？对吧，然后一个一个的去做出来，所以这个时候要for light I等于零以下啊。然后I小于we knowde的children I，然后I加加，我需要给它遍历出来。好，然后do就等于米v node的DOM的第项。对吧，哎，然后再追加出来再一点啊，这会还是报错，咱们看一下啊。38行，但是报错。Children的嫩子，看看怎么回事啊？啊，这是newno的啊，这写错了。对吧，哎，这样的，那这样的话一点，你看他是不是出站了，但是还是那句话，老的文字是不是要清除掉。现在知道为什么我们这儿。看见了吗？知道为什么要写个一吗？因为它你追加到这的时候，对吧，你把新的节点追加到里头的时候。诶对，那他老的文字不一定掉，它跟这个不一样，这个是文字能把。

盗墓覆盖，但是盗墓不能把文字覆盖，对吧，这个新盗墓是不是不会把这老文字覆盖啊。啊，所以你新盗墓没有把老蚊子覆盖，你要把老蚊子给去掉。听懂了吧，哎，就行了啊，那所以说我们现在要去清空老的节点。的内容，所以就是old we know的inner text啊，或者inner HTML就把它里头清空就变掉啊，当然是em me啊。哎，给它清空掉。啊，然后这是遍历子新的v node的子节点。对吧，哎，然后创建啊元素创建道墓，哎，上树就行了。所以它是循环上树的，这样子走的一个一个过程，对吧，来创建道，然后上树这样子走的一个过程。所以一点啊它就OK了，一点它就OK了，老的就没有了。

发现了就行了啊，那这个靠谱吗？靠谱，因为他不管是多少层他都能进行。哎，不管是多少层他都能进行，但是呢，你一定要记住的是什么，就是我们现在这个这个这个。它不递归，就这一层不递归。啊，它是一层一层的比较。大家能理解吗？就什么意思呢？就相当于我们我们他现在只比较这一层。对吧，它只比较这一层，但是如果子节点它是不是还有可能就是继续在判断它是不是同一个节点呀。能理解吗？就是它子节点是不是还是要继继续去判断它是不是同一个节点。对吧，就是他这个这个逻辑就是，所以他只比较一层的啊，这就是他只要比较一层的这样的一个逻辑，所以一会五角星当中，五角星当中这个逻辑就非常丰富，因为五角星当中可能会再再从头走啊。因为它的所有子节点，我们是不是又需要判断是不是同一对象，是不是这个，是不是这个，所以一会儿就需要提出去。

啊，这句话我再说一遍，这特别复杂，这块很复杂，就是说。我们现在你看啊，它的复杂度没那么高，它是section判断成它对吧，那如果我section当中我有一个ul。大家注意看。有没有发现它已经很复杂了？啊，Ul当中，我再来一个H力。然后这个一会咱们再加K啊，K系统咱们现在还没有呢，这是B，这是C，等于说这一层又有来了一层，就是层中还有层。层中还有层。对吧，那现在的话，你看这是个D啊，我们先看一下咱们现在能不能变ABC一点，是不是abcd能变了。对吧，就1.abcdabcd能变了，就1.abcaabcd能变了。那为什么咱们现在一点它就能变了呢？哎，对，因为咱们现在不就走的是什么，诶这个else咱们还没写呢，它怎么能变呢，对吧，它是怎么回事？Old window的children不等于anti find，并且old window children大于零。

Children的Les啊，抱歉，他现在应该变不了。啊，N大于零没写N，你看一点没有变吧。对吧，一点没有变吧，一点没有变是因为我这里的if没有写，这里是最复杂的，我们先把这个空空上这里，但是这里它意味着什么？他是不是这里的，他不是说傻傻的只比较这一层，对吧，他是不是还有这一层，还要再比较下一层啊，所以有没有发现就是。一会儿我们在写这个if的时候，他是他要回调他自己个儿的这个这个逻辑啊。对吧，他要回掉他自己个儿的这个逻辑有没有理解？对吧，哎，所以这个就是他的一个特别牛逼的一个思想。就是它每一层都用同样的一个思路判断。啊，就是你这个图不是只执行一遍，他执行到五角星之后，他又再执行一遍，因为它下一层他又需要按这个逻辑走，再下一层又要按这个逻辑走，然后就问啊，这一层是不是老的有T的，新的没有啊什么什么比，然后是老的有新的没有T比对呀。

为啥呢？因为它下一层是不是很有可能，就比如说这是老的有文字，新的没有文字，能理解吗？你看。看见没有？对吧，我再放个屁。对吧，这是不是就是这一对于这一层来讲，不就是老的有文字，新的没文字，而是子节点吗？懂了吗？所以就相当于你刚才写的这些东西没白写，他会在下一层的时候也会按这个逻辑进行调用，这是一个最精妙的一个词，一个一个东西啊，这是一个最精妙的一个策略，就是它每一层都会按照同样的一个逻辑去执行。啊，每一层都会按照咱们现在写的这些代码来执行。啊，这是咱们非常非常重要的一个知识啊。好，那至于这里头五角星的这里头啊，就是最复杂的这里头，我们稍后我们再去做对吧？哎，五角星这里我们稍后再去给大家讲到底是怎么回事啊。