02.尚硅谷Vue源码解析之虚拟DOM和diff算法/视频/07-尚硅谷-虚拟DOM和diff算法-手写第一次上树时

这节课我们来学习手写，第一次上树时啊，这个话说的特别的啊，人话啊，就是第一次上树的时候呢，我们要进行哪些的操作，前面的这个课当中呢，我们已经把这个图画出来了，那现在的话，实际上就是说我们要从派函数被调用的时候啊，这样的一个时候，我们来去进行一个书写。那么呃，对吧，就按照这个呃两个判断，然后去进行对吧，哎，就OK，所以这个图一定要画出来，不画出来的话，不知道咱们要干什么。好，那么怎么写呢？还是之前的老办法啊，就是把这个我们自己写复原啊，复原成叫呃，咱们的那个index。啊，然后这个呢，就变成这个叫体验第一步算法了，对吧。好，然后这个我们自己写，再恢复成index X啊。

这样一做是不是我们就可以从这index这块就可以开始，这个就可以开始了，对吧。好，那么一上来的话呢，他就需要去啊，这回是真正的这个要上树了，所以我们先把测试代码给写好啊，那我一上来我就先得到document。哎，不是document得到container等于document get element by ID container，好，然后呢，我再去patch，当然patch算法我们还没有写啊，所以我们要新建一个patch.js这个文件。然后让它默认暴露一个函数。它默认暴露的这个函数呢，其实就是patch函数啊，那这个时候我们就可以引入patch。哎，我们就不init了啊，那你说老师那个init是干嘛的呢？Initt其实就是组装各种模型的组装，咱们可以看一下。

官方的对吧，组装这些模型什么的，那我们现在做一个简单版的啊，就是核心版的这个磐石算法，所以呢地步算法，所以我们就不再设计这些啊，细枝末节的东西。好，那我们直接引这个patch。好，然后就可以书写咱们第一次的这个啊，上述的这个情况的东西了啊，那第一次的话，咱们不要去把虚拟节点创太复杂啊。To mynode对吧？一我们不要创太复杂，我们就直接这么创建。哎，就直接创建一个H1你好。就行了。好，然后我们还需要得到那个container。Document get element by ID element get element by ID啊，我们要把这个container我们给他拿啊，得到。

对吧，Container我们给他得到，然后这个时候我们就可以去patch，哎，这个container和my vino的伊朗，好，那我们现在可以去刷新看一下啊，刷新看一下，那你现在就会发现页面上并没有出现H1，这是因为我们现在这个函数什么都没写呢，对吧？哎，也没有上述也没有比较啊，它是空空如也的，那我们的目的肯定就这出现H1，那不仅仅要出现H1的话，就是说如果这里还有H函数的这个子节点。啊，那这个时候等于说他还要都要能创建出来，所以他这个东西呢，长路漫漫，那我们现在呢，就一点一点写，那首先第一步是干什么呢？大家可以看见它是不是要去判断老节点是虚拟节点还是盗墓节点呀，对吧？所以咱们在这里呢，就可以去判断啊，这是判置函数，诶那它接受两个节点，第一个就是old one menode，第二个就是new windownode，哎，判断什么呢？判断咱们传入的第一个参数是DOM节点还是old的no的节点啊，还是old的，还是虚拟节点。

哎，那判断方法很简单，就直接看它是不是有赛属性就可以了。明白吗？啊，就直接看它是不是有S属性，就如果你传的这个老节点不是空啊，那如果是空啊，或者是安迪范的。哎，就是old we know the cell是安迪万的。那那么它不就说明什么呢？它是不是说明它是一个DOM节点啊，对吧？哎，DOM节点。啊，这说明什么呀？传入的第一个参数是盗墓节点，那么此时就干嘛呢？对，要包装为虚拟节点。啊，那我就让old beno对吧，它就等于一个包装虚拟节点。那包装成虚拟节点很简单呀，我们是不是v no的函数早就写过了，它不就可以负责呃创建出虚拟节点吗？所以我们就把它给弄过来呀。

对吧，弄过来的话，咱们可以看一下它，它这里头是选择器data children text em啊，咱们可以给它啊，它这有感应选择器是什么？对选择器是不是就是它的那个tag。对吧，哎，就是TT一个啊，他一个内幕。啊，然后to lower case就可以了，To lower case啊，变成小写字母，然后第二个是数据，数据老节点肯定是，呃，就是没有数据空对吧？哎，然后children准咱们可以留空数组或者按D办都行，然后文字的话咱们就按D办，没有啊elm那就是他自己old。对吧，V note啊，就是他自己，那不就是他U吗？那这样的话，这个O的v note就做出来了。这能看明白吗？对吧，那咱们现在看一下这个old的beno啊，就可以试验一下，写一写试验一下就可以了，那你看它就被包装出来了，没啥毛病。

啊，非常的简单。那接下来的话我们要干什么呢？接下来的话就需要继续看图，你看这一步是不是完成了，这一步也完成了吧，啊，那就看图就行。就是说咱们大家为什么要先把流程图画出来，因为流程图画出来之后，你就知道它就很嗯就是很这个什么，就是相当于呃很清晰很透彻啊，你就把这个视野呢，给它局限在一个地方了，当你视野局限在一个地方的时候呢，那这个时候它不就是相当于更加的让你就是很很这个很这个什么嘛，对吧，哎。好，那这个时候我们就可以看叫判断old windownode和new windownode是不是同一个节点啊，要判断old的windownode和new windownode是不是同一个点，所以在这里我们就需要判断判断old windownode和new venode是不是同一个节点，和veno的啊是不是同一个节点。

好，那怎么判断？其实很简单，就是要看old的key。对吧，同一个解咱们就不不封装函数了，就直接在这判断就行。啊，是不是等于等于6v no的K。哎，并且呢，你o no的这个啊选择器。哎，还必须要等于新new的选择器。好，就这么简单粗暴啊，只要都满足，比如说这个都是安迪范，然后这个都是div，那它就是同一个节点啊，这块写错了点。哎，那么咱们就可以落为一个是同一个节点，那同一个节点的话就需要精细比较。啊，就需要精细比较了，看见没有。啊，那这精心比较是后边的事儿，它比较麻烦，那咱们现在呢，是不是就需要一个不是同一个节点，所以这个时候是不是就要暴力啊，对吧？哎，暴力插入新的删除旧的。

啊就可以了，他为什么要先插再删呢？因为插入的时候需要一个标杆，它插入到原来节点的前头啊，然后再把原来节点删掉，如果你先删的话，它就没有那个标杆了。很简单一个道理对吧，所以他判断出不是同一个节点暴力插入新的删除旧的啊，那现在的目的就是说我要把这个v node给他插入。这个V咱们大家知道它是一个如假包换的一个啊，盗墓对象，那我要把它给插入。并且呢，他children如果他要有值的话，它是不是还要循环递归插入啊。明白吗？哎，所以它这个比较麻烦啊，那插入在哪呢？插入在咱们的这个，呃节点就是老节，呃老节点的前面。能不能理解，所以这个时候我们就可以把一些盗墓啊，或者是盗墓的一些操作，哎，咱们就可以真真真正给它封装出去。啊封装出去，那咱们现在呢，呃，可以，因为这个函数比较复杂，所以我们现在就可以给它就叫create啊create element啊叫JS。

你看，Create element。哎，就表示的是真正创建节点对吧？哎，这个函数的功能是真正创建节点，所以我们现在就可以expert default。Function啊，真正创建节点，那么他要提供哪两个参数呢？对，第一个是不是就是你要创建的这个虚拟节点，Reno的第二个是不是就是它的标杆，标杆大家知道吗？就是你你你你要以它为基准插入到它前头。明白吧，哎，就是说它相当于标杆啊，标标杆的话，我们写一个查一查标杆怎么so啊，它的名字呢？哎，标杆啊，叫pavot啊，其实这个词叫pivot。啊叫枢纽中心就是基准啊，叫基准兵啊叫pivot啊pivot这样子的，也就是说将这个vnode是不是要插入创建，创建为DOM吧，创建为do对不对，然后是不是要插入到咱们的pilot这个这个元素之前啊，对吧，是这样子的一个道理，那所以说这个东西的话，如果它不用递归，那还挺简单的，它就一层。

好，我们在这里引一下啊，这是咱们自己的这个patch。啊，咱们别乱了，咱们把这个引一下叫create element from点杠create element.js。好，然后在这里呢，就可以暴力的啊，插入新的，那怎么办呢？我就可以暴力插入新的，把这个new windowno的传进去，标杆是谁？标杆是不是就是O的vnode的elm啊，哎，因为我们刚才已经把O的meno的封装进去了，它最后一个参数。他最后一个参数是它原来传输的这个对象啊，那最后一个参数不就是被封装成了em吗。

被封装成E之后呢，这个时候就需要在这里使用点em把它得到。就可以了，所以现在呢，我们就要开始工作了，这个工作的目的是什么？对，目的是把虚拟节点，哪个虚拟节点就是这个vno的是不是插入到标杆。标杆是谁？对，标杆就是拍爆前看到没有？我在这里写写注释。为什么要写写注释？因为这样的话就很清晰。很清晰，那目标就是把这个虚拟节点，这个虚拟节点大家看一下对吧，插入到它之前啊。那那现在的话，大家其实觉得挺简单的啊，为啥呢？因为你现在就可以去创建这个这个node啊，或者说这个叫DOM node啊，就是它是一个真真正正的一个DOM节点。对吧，那就等于document create element，它是什么呀？是不是虚拟节点来啊，选择器啊，啊，咱们说过这个选择器是很简单的，不能写景和点啊，我们就直接给它创建出来。

好，然后创建出来之后呢，接下来我们要看它是有有子节点啊，有子节点，子节点还是有文本啊，就是子节点和文本是不能共存的，大家一定要记住啊，我们是不允许这样子的情况，咱们是弱智版啊，就是啊傻傻瓜版，你看咱们不能有ul-ul这样的情况。就比如说这里头有个力啊，这个啊，就这里头不能有散文字啊，不能有这个散文字，它必须只能有这个子元素，哎，不能散文字和子元素都在啊，因为咱们今天写的是非就是不是细节不是特别好啊，但是能保证让你把这个东西彻底弄懂。啊，那所以说咱们现在呢，到底是有子节点还是有文本，那很简单啊，就是如果咱们现在你传入的vno的。啊，它的TT对吧，不是空。

Text不是空。对吧，哎，就是它是有文本的啊，它是它是有文本的啊，然后再且他的这个啊children。对吧，哎，是安迪范的啊，或者它的丘疹的长度是零。哎，这样子的。明白吗？啊，是这样子的，就加圆括号吧，啊，当他文本不是空，并且他的children是安范，或者children的长度是零，因为children可能是范，或者是咱们有的时候写错了，写成公路组了啊，那么都行，他都会判断。那么在这样的情况，它是不是就相当于它内部是文本啊，啊，它内部是文字，那就把文字弄上就行啊，文字咱们在它的这个源码当中，它是用create啊，它是用document create text node。啊，Create text not的这样的来做的啊，但其实没必要啊，不用not，咱们是不是就直接往新创建的节点的inner text对吧？哎，直接就去写它的内容就行了，这样不就更简单吗？

那现在你创建出来的这个节点是什么？是不是孤儿节点呀？对吧，你现在创建这个节点DOM node，它等于说真的是创建一个节点啊，创建一个DOM节点，那么这个节点现在呢，还是孤儿节点。啊，他没有这个节点没有没有，那所以说就要给它上树，将孤儿节点上树，怎么上树，是不是用document insert啊，Before这个东西啊。对吧？哎，那新节点呢，就是donode，然后咱们先去看一个标杆节点，标杆节点是什么？对，就是你传的拍lo就行了，那你看这个节点就能上树了啊，但他这报错了，The not which啊，The new not is To Be iner child啊，就说这个不对。

啊，因为我们要让负元素，负元素来插入它，所以应该是这个节点的副元素叫parent node啊，所以不是document调用，就是说让咱们这个标杆节点的副元素调用insert before方法，对吧？调用insert before方法啊，然后呢，将咱们的这个新的孤儿节点是不是插入到咱们的标杆节点之前啊，标杆节点之前。所以他的父亲很有可能是document.body但也不一定，因为他递归的时候，他里头是不是特别乱呀，所以这么样一调就很棒啊，那你看这就出来了。看见没有，这个你好，是不是就出来了。对吧，哎，这个你好，他就真真正正的出来了，就非常非常的这个棒啊，就很棒，所以这样的话，他就啊完成了我们第一次上树的这个事情，但是第一次上树的话，它这里头的话是应该是递归的。

对吧，它这里头应该是递归的，因为你这里如果是有一个数组，咱们大家知道，就比如说这是ul，然后里头呢，又是H又是力。啊，你递归你就玩不转了A，对吧，ABC。哎，你一递归你这就玩不转了，大家发现没有对吧，它就玩不转了啊，但这个U能上去，Ul都没有上去。因为你这个就它后边的这些节点都是，呃就玩不转了，你这个H对吧？哎，然后呃，就就是你这个patch啊patch的话，你这个节点不是创建出一个虚拟节点吗？然后你这个虚拟节点这块是个数组，所以说你这块就相当于没有写这个else。没有写这个else if，对吧？哎，你需要判断它是一个数组a ray ISA ray就是we know的children。啊，它是个数组，并且呢，是不是它的这个数组的长度还需要大于还要大于零对吧？哎的length是不还需要大于它有子节点。

看见没有，就是他如果是个数组啊，他是解决自己的，他如果只有一个儿子，咱们vino的不是也会给他包装成数组吗？对吧，那么这种情况你没写，所以他就什么都不做啊，那咱们下个视频咱们去讲解，哎，下个视频咱们去讲解这种递归的这种情况。那同学们要做的任务呢，就是把现在我们学的这种文本节点，第一次上述的这种文本节点啊，咱们要去给他啊学习会啊，要给他写熟。