00:00
好,这节课呢,我们来学习感受递付算法。那么这节课很关键啊,我们要感受一下第一步算法,咱们直接来进行代码的演示。好,我们在呃,刚才不是有一个in大X吗?对吧,叫学习H函数,我们给它另存为一份啊,这个呢就叫做inex X杠啊就叫inex x.JS但是呢,我们先把这个inex X备份一下,哎,我们呃自己写啊,哎,所以说就然后再呃把这个H函数被另存为一份,这个就是咱们现在新的一个index。明白吧,哎,就相当于轮着当inex X啊,因为我们毕竟现在这个骨架很大啊,然后啊,你要规划好好,那这个inex呢,它是干嘛的呢?诶对,咱们在这里头呢,测试一下到底这个地步算法到底是怎么回事啊,其实特别的有意思啊,咱们大家啊,看完这段视频你就会觉得哇哦,彻底理解第一步算法到底。
01:04
在干什么了啊?你看啊,咱们现在呢,先去创建咱们的虚拟节点一,哎,这个虚拟节点一呢,比如说叫vno的一好用H函数创建一下,它是ul对吧?哎,然后这是人家的虚拟节点啊,所以人家的H函数不是那个低配版,所以它可以直接写数组啊,但是为了防止一会儿测试啊,咱们还是写一个这个空对项好,然后里头呢是三个力。哎,然后文字呢是A,然后这个是B,然后这个是C,这个是D。哎,没有问题。那么虚拟节点是可以上树的,我们已经知道怎么上树了,就是我们要用container。啊,把它放到派CH的第一个参数当中,Document给的ID好,然后这个是container,然后这个是vno的一就让他上树,这样他就能上树了,啊看看这怎么回事,看他before initialization,啊,他说cannot。
02:08
呃,这个啊,这个是写错了对吧,这是patch啊。这都已经晕了是吧?Window notde1啊好,这样他就OK了,上树了,上树之后呢,接下来我们做一个按钮啊,我们往页面上放一个按钮,这个按钮呢叫按我改变盗母。哎,按我改编到,然后给它起个名字叫BTN啊,就给它加个按钮,我们现在的任务很简单,就是点它之后呢,我们要进行新的patch啊,Patch这个单词实际上咱们查一下,你看patch表示的是修补,看见没有修补啊,叫patch叫做修补,那修补是什么意思呢?修补顾名思义是不是不是暴力拆除啊,把原来的拆掉啊,然后上新的,而是修修补补。所以它呢,实际上就是地服算法的一个最核心函数,那这个时候我就可以来一个v note2。
03:05
看见了吗?哎,B note2,那这个时候你看我就可以写个abcde啊abcde给它加个E这个节点,看见了吧?哎,加个E这个节点啊,OK,那接下来呢,我们就比较牛牛了啊,我们就得到这个按钮,BTN把这个按钮也得到。哎,这是得到盒子和按钮啊好,然后呃,我们先往上放吧,把这两个往上放啊,排一下就直接上树了,对吧,然后我们点击它之后让它变成v note2。看见没有,就是点击按钮,点击按钮的之后,点击按钮时对吧?诶将veno的一变为VNODE2懂不懂,哎,它是这么玩的,所以它这个时候呢,我们就排斥一下v notde1。逗号WINDOWNO2就行,你注意也就是第一次啊,第一次你要在container中放window的一对吧,第二次只要VNO1变成WINDOW2就行,但是我这里忘加监听了。
04:07
咱们今天编程不在状态呢,就老写错对吧?哎,这回好了啊,那你看我一点它是不是就加了个E呀。啊神奇吧,一点开就加了个E,那这个时候呢,它对相信你已经猜到了,它内部呢,是使用最小量更新。就是我一开始是这一套虚拟节点,对吧,我点击按钮之后呢,它是不是要变成这一套虚拟节点。发现了吗?点击之后它要变成这一套虚拟节点,那这个时候的话,它。应该智能算出来啊,都是一样的,是不是就这一不一样。理解吧,所以他应该追加这个,也就是说他之前的这四个节点,应该不是咱们一开始咱们PPT讲的那种,就是暴力拆迁。对吧,哎,应该不是这种暴力拆迁的这种形式。明白了吗?对吧,不是这种暴力拆迁,就说把它给它拆了啊,然后再重建这样子的一种啊一种形式,你说你把这么好的一个房子直接拆了,那那效率多低呀。
05:11
对吧,所以它是智能的,那咱们怎么证明它是智能的,特别特别特别搞笑,这个方法就咱们现在怎么证明这个abcd这四个节点没有动啊,怎么证明这abcd这四个节点没有动,是还是原来的,很简单,就是我直接把这里的文字改掉。对吧,改成丑八怪啊,改成丑八怪。看见没有,哎,直接我我直接在这里编辑这里的节点文字啊,改成丑八怪什么意思呢?就是说我在这里不是随便打一些字吗。那现在假如说我点击按钮之后,这些字没有变。那是不是就证明咱们的地步算法根本就没有改他们四个。能理解吗?所以说你看我一点这几个词是不是还在,丑八怪是不是还在。
06:00
就是丑八怪没有恢复为A,他没有变成B,他没有变成C,他没有变成D,就说明我们的这个更新是最小量更新。你们大家能理解吗?就说明我们的更新呢,是最小量更新啊,我们的更新呢,是啊,有涉及到没有变化的节点的。对吧,所以这个派非常的聪明,他已经感觉到了,哎,就是你的这几个相没变。啊,所以这是最小亮更新,然后老师的这种方法是不是很巧妙啊,如果你觉得巧妙的话,可以在弹幕上可以打一个说妙是吧,哎,很妙啊,打一个妙字都可以啊,就是直接在这里去修改它的文字,那你看这个文字是没变的,对吧,再点它还会,为什么再点它还会增加,因为再点的话,呃,就就就是说他不他连续点击的话,它是不是就会连续的去进行把这个。二和一去进行改变,那为什么没变,那它实际上是因为我们vino的二要成为新的这个VINOE1了,对吧?哎,等于说你每次都派着它,而现在真实倒是V到二要变成它,所以这是三了啊,所以再点它还会再上一个,可能你转不过这个弯,没关系啊,等咱们写派置函数底层的话你就知道了啊,但这次你就点一次就行,不要多点,多点为什么老是啊,你你其实不是闹的特别明白,等后边你就明白了啊,但是现在呢,你就明白他真的是最小量更新,明白吗?好,那咱们现在检查检查它。
07:30
真的有这么智能吗?他真的有这么智能,就是他真的会去观察到啊,哪些东西要变,哪些东西不变啊,他真的很智能,那这个时候我们来看一看,比如说我们把这个E在前头添加。你看我们把这个E在前头添加发现了吗?那在前头添加的时候,这个时候一点,你看这个E是新增的。对吧,那这个时候问题来了,他到底是这个E是新增的。啊,就是他到底是在前头新增了一个E,还是他在后边新增了一项,然后把原来的这个A改成了E,把B改成了A,把C改成了B,把B改成了C,然后在后边增加了一下,大家能理解这个意思吗?就是说你现在这么点一下,这不是出了一个意吗?你感觉是在前头增加的E。
08:19
对吧。那咱们现在做个实验呗,还是丑八怪实验法啊,这是老师发明的,叫丑八怪实验法啊,丑八怪呀,对吧,然后把这个也改一下呀,阿斯蒂芬啊,然后把这个改一下呀,啊,改一下玩玩啊,然后把这个改一下呀,叫敲个趣味呀。对吧,那这个时候注意看我一点注意看啊,神奇的事情发生了一点看是不是变成EABCD了,也就是说丑八怪没了。这就说明你以为的东西不对啊,就是这个E呢,它并不是非常智能的在前头插入的,而你真的理解错了一点之后,这个新节点是在后边插入的,然后他把原来的A改成了E,把B的内容改成了A,把C这个内容啊,就是文字改成了B,对吧?那为什么证明他改了,因为丑八怪实验法呀。
09:09
啊,你如果是在前头插入你这个节点文字不能变,但它变了呀。啊,那所以说这个E并不是很智能,因为他没有判断出来对吧,所以他就认为这个意就是。原来节点的文字是A变成了E,然后B呢,变成了AC,是不是变成了C?呃,不对不起,C变成了B,然后B变成了C,最后增加了一个D,那你说老师他傻啊,他真傻,不是他傻,是我们傻,我们没有给他加K。啊,我们没有给他加key,哎,那这个时候你是不是突然间我的天呐,是不是突然间脑子中灵光一闪,有没有兄弟们有没有觉得脸很发麻发烫?啊,我一写这个K,你瞬间是不是得想起来了?咱们当年学view的时候,老师给你们讲V-four的时候,是不是一再强调要加key呀?现在知道K是干什么的了吗?对,K就是它的唯一标识。
10:09
能明白吗?你加上K之后,它的算法效率会非常的大啊,会非常的大,你看咱们把这个K给它加上,K是唯一标识,就告诉他它还是原来的A,他还是那个B,他还是那个C,他还是那个D,他的K是你陌生的E。你把K加上,注意看一点,这回就真的只在前头加了,为什么丑八怪实验法呀,对吧,来吧丑八怪。丑八怪实验法呀,哎,然后这个呢,继续阿斯蒂芬啊,然后这个继续啊,来这个继续乱七八糟的杀杀,看见没有。注意一点,是不是没变。是不是没变,有没有感觉到这一刻你瞬间明白了一些东西,啊,就刚刚过去的这几分钟,你瞬间的明白了一些东西,有没有觉得对吧?那那为什么呢?这原因其实很简单,就是揭示了咱们的这个K,它是服务于最小量更新的。
11:09
啊,如果你不加K的话,那他这个节点它有可能就是说啊,他就会判断成在最后加节点,然后把文字顺顺序改了,所以说他进行的操作呢,就是增加了一个,改变了四个啊改变了四个的内部文字。啊,但是你加上key之后,它没有改变内部文字,它是不是就直接加一个节点,等于说少做了四步操作。啊,这块大家应该能听懂啊,应该能听懂,所以这个key是非常非常关键的啊,这个key就非常非常关键的啊,好,那么这个呢,就是咱们的第一个心得,好,我们回到PPT当中啊,这个PPT当中咱们就已经有一些心得了,咱们看第一句话。啊,后边呢,还没演示呢啊。你看最小量更新太厉害了,真的是最小量更新,这就是咱们的心得呀,当然K很重要对吧,因为K呢是这个节点的什么呀,唯一标识就告诉咱们的这个地算法啊,你这个在啊更改前后。
12:13
对吧,他们是同一个do节点,所以这个K很关键啊,这块太关键了,所以老师可能要重新讲一下啊,咱们大家别嫌老师烦,就是如果我们把K去掉,大家注意看,把K去掉的话,那这个时候这个E呢,它并不是在前头插入的,它是在后边插入了一个节点,然后呢,把A改成了E,把B改成了A,就是这些文字进行了改变,然后这里文字呢,改成了D。哎,所以他进行的操作很复杂,但是如果加上key之后,他就知道了,哦,原来的节点还在,只不过E呢,是在新的地方插入了,明白吗?所以这个时候它是不是就直接在这里就显示一个E就可以了,对吧?哎,它是在心的地方啊,他就直接在这里插入一个E就行,所以这个的就是咱们的心得一,这个大家一定要看懂啊,这是心得,第一个心得啊,咱们叫心得一,哎,不编号了啊,不编号了直接看吧,那后边还有两个心得啊,你看这个心得叫只有是同一个虚拟节点才比较。
13:16
这什么意思呢?就是说我们现在比如说这是ULAABCD对吧,然后呢,它现在呢,要变成OL。Abcd。啊,一个ul要变成OL,又无序变有序。那这个时候你说老师太简单了,他直接把负层这个选择期变了不就行了吗。对吧,直接把负层这个选择器变了不就行了吗?哎,那咱们现在看一看一点它是不是变无序了,那这个时候丑八怪实验法来吧,丑八怪实验法来呗,对吧?哎,那这个时候就是丑八怪,然后你看一点有没有发现这个丑八怪没了,对,就说明这个节点已经不是原来的节点了。能明白吗?那什么意思呢?就是刚才咱们PPT上那个文字,就是它不是就是负节点,已经不是同一个节点了,所以他这个时候呢,他就会暴力拆掉里头所有,然后把新的力上去。
14:13
啊,再说一遍,就是因为这个ul和这个OL被内部判定为不是同一个节点,他们俩注意啊,叫不是同一个,咱们写英文叫same。啊,或者叫same note就不是同一个节点。它不是same note,它不是相同的。不是相同的话呢,这个时候咱们vuee的底层啊,咱别说vuee底层都说拿底层,它就会开始使用暴力啊,你注意看,这是这句话叫只有是同一个虚拟节点才进行精细化比较,否则就暴力删除就的插入新的。对吧?那延伸问题如何定义他们是同一个虚拟节点呢?就如何判断是同一个节点,答案就是选择器相同且K相同啊,就是他的底层老师就不带着你们看源码了,但是他就告诉你啊,就是他只要判断这块选择器变了。
15:07
哎,选择器变了或者K变了啊,但是我这里没加K。那么它就视为不是同一个节点,也就是说你现在两个节点要进行patch啊,进行修补,对吧?诶节点二和节点一要进行修补,那这个时候如果他们压根不是同一个节点,那么对不起,我不修补你们。啊,我不修补你们,我就会直接把这个里头ul给干掉,然后把这个OL进行上述,就是直接拆掉它,然后直接上他。明白了吗?那这个时候的话,你就会问一个问题,说老师他并不是那么牛逼呀,他并不是那么的牛逼呀。对吧,哎,你就会问这个现在这个绿颜色这个框里的这个字,说它真的不是那么牛逼啊,真的会影响效率吗?其实啊很简单,就是便节点负极,一般来说在工作中不会遇见呀。明白吗?什么意思呢?比如说你现在要去写一个O啊,你看你的编程这是ul对吧,然后这是杠ul啊,我把这语言模式改成啊,改成HTML好,然后里头是力。
16:09
然后呢,你你你对吧,你怎么写V-if,比如说A啊,比如说这是啊MMM对吧,当MM的,然后呢,你只能这么写O。对吧,然后叫V-else呗。对吧,那你觉得你在工作中会写这种指令吗?就当MMM为真的时候让ul上数,那假的时候OL上数,然后这几个例还是一样的,对吧?诶这几个还是一样的,那你说老师这里头是子组件,那子组件的话,那它更新效率可能会大一点啊,比如说这是叉L的组件,对吧,对吧,那即使这样的话,它虚拟更新。对,即使这样咱们也很少写呀,你懂我意思吗?就换负极,所以如果你换负极恕啊,他不进行啊,请宽恕它,它是不进行。明白吧,哎,这个diff的啊,这个这个知识很关键哦,我可以告诉大家啊,咱们现在讲的所有知识面试官都会考,其实面试官考你,他不会出题考你,他就会让你聊,他说你现在跟我聊聊地步算法吧,那你这个时候就可以聊啊,聊聊什么是虚拟节点啊,对吧,然后就聊咱们今天说的这K很重要,然后聊一聊只有同一个虚拟节点,他进行细节比较。
17:25
能理解吗?哎,然后什么叫同一个虚拟节点,就是key啊,就是选择器要相同,并且key也要相同。啊,一定记住它是且的关系,所以ul变OL实际上代价很很很很差,代价非常非常的高昂,就是他把这四个全删掉,创建新的。啊,创建新的。好吧,哎,所以说一定记住只有同一个节点是啊。好了,然后还有一个心得,这个心得也非常非常的关键啊。这个啊也非常非常关键,叫只进行同层比较,不会进行跨层比较啊,那么这个同层比较,其实如果小伙伴对吧,诶粗浅的看过一些公众号文章,那么实际上你是知道公众号文章就是在讲这个知识的啊,就这个就是在讲节点,只会进行同层比较,诶不同层他不比较,那什么意思,估计小伙伴不懂啊,就是所以说这些公众号啊害人,因为这些公众号吧,太得来主义了,就是你得到它太简单了,这样的话呢,就导致咱们的同学们平时的时候就弱于对他们的一个具体的一个细节的一个一个一个理解了,对吧?哎,这样子的。
18:36
啊,所以这样的话,我们就就得需要大家呃做实验,你看啊什么意思,咱们现在还是ul变ul啊,但没变化对吧,底下都没闪烁,你没法没紫一下啊,那这个时候如果我们现在做一个特别巧妙的就是。给他多一层啊,多一层,比如说现在是div吧,因为ul当中多一层不好多。Div当中四个P啊好,然后这个呢,也是div当中四个P。
19:04
好,那这样的话,你看div当中四个P啊,对吧,我一点还是div当四个P,但是呢,我现在点完之后,诶,我给它多一层。我给它多一层,再多一个,比如说多个section啊,Div当中多个section。对吧,多一层,哎,然后这一层里头是这个。这个大家应该能看懂,就是原来就是div里四个P,现在点击按钮之后呢,变成div里头一个SECTION4个P。能看懂吗?那这样的话大家注意看我一点,是不是这里头就多了一个section标签。看到吗?哎,咱们看一下啊,这个div里头是四个P,看这但是我一点之后是不是多了一个section标签呀,那section里头就四个P发现了吗?Section里头是四个,那这个时候的话,这个问题很简单了,就是这种情况下它是最小量更新吗?
20:02
啊,咱们来还是丑八怪试验法呀,对吧?哎,我们把这丑八怪给他弄上去啊,拿一个例子代表一下,A代表一下,注意看一点,丑八怪字样没了说明什么?对,是不是说明这四个节点下树了。然后这四个节点是新的。明白吗?因为如果是不是新的他丑八怪会维持这字样啊。听懂了吗?所以这个就叫同层比较。啊,就是它只进行同层比较,不会进行跨层比较。看明白了吗?就是即使是同一片虚拟节点,但是跨层了,对不起,精细化比较不付你恕不啊,恕不地府对吧?请宽恕我,我不地付你啊,而是暴拆除暴,暴力拆除旧的,然后拆除新的。明白吗?就是你这个abcd跨层了,新建了一层,在这里新建了一层这个abcd新建了这一层abcd对吧,这个abcd跨层了,新建了,这新建出了这一层abcd啊,新建了一层什么呢?就多了一层section,多了一层section标签。
21:10
对吧,哎,多了一层section标签,那这个section标签的话,大家有没有发现他没有那么聪明,不会那么聪明,把这四个直接放到新的section标签中没有。啊,而是拆除了四个,把这四个全拆掉,创建了新的,并没有利用这四个啊,没有进行什么克隆啊,移动没有没有克隆,没有移动就是拆了新建的。啊,那这个时候你就会又会问说效率是不是低啊,那它其实不低啊,效率其实不低啊,这个绿色太绿了,咱们给它变大一点,对效率不低,因为它实际在VUE开发中,他基本不会遇见。明白吗?哎,他基本不会就这两个啊,都是上面这两个操作,上面二三的操作啊,对吧,他不会遇见,为什么这个跨层,你你看咱们平时写VO的时候对吧,比如说人家一开始div。
22:03
啊,一开始div里撕个P美滋滋的对吧,然后呢,你点击一个按钮之后,你要给它装到section里,你说有这种需求吧,没有这种需求吧,就是点按钮,然后这你还不知道怎么写啊,V杠,If a mmm对吧,点击按钮的时候在三个上里,然后不在按钮的时候是这个。然后这些呢,你还都得写一个V杠非MMM看见没有,就一开始是显示这四个,然后一点击按钮之后就显示这个对吧?那那你一看这个代码,你就觉得这不像是咱们平时view开发的时候会写的代码吧。明白吗?所以咱们的diff算法呢,换句话说,它是它是讲人话的。明白吗?就第一步,算法它是讲人话的,他并不是你们想象的那么无微不至的,就没有那么神,没有那么神啊,所以说他真的没有那么神啊,所以一定要记住这块,第1KEY很重要,第二只有同一个虚拟节点才会比较,第三是同层比较。
23:04
懂吗?哎,同层比较啊,但他这个图画的有点问题啊,他这个公众号的图其实不对,他同层比较的话,其实他他这是个子组建这个黄色的我没明白啊,但他这个意思就是同层比较啊,但它是同一层的话,顺序它会换乱比。哎,同一层的话,它的顺序会乱,比,比如说你现在啊,咱咱这个同一层啊。咱们再给它恢复成同一层,不要给他来新的层,对吧?啊,再给它恢复成ul吧。因为ul那个力,看起来那个小圆点挺漂亮的啊,这意思。对吧,哎,然后你把这些打乱,你看看把这些打乱,什么DACB,对吧,或者是DADACB吧,这不是很乱了吗?对吧?哎,然后你看一下一点不是,诶好这块少个逗号啊好一点不是变成DACB吗?哎,那实际上它都是进行最小量更新的。啊,你你不信的话,咱们来看一下啊,不过这个没没有办法改你的文字啊一点,这个阿斯蒂芬,你看它是不是移下去了。
24:04
有没有发现这个就是你看你不信的话,咱们写个丑八怪A对吧,那你看一点,或者这个叫丑八怪B啊,咱们都写一下。丑八怪。B啊,现在我想证明什么,就是在同一层啊,只要是同一层,那么它的最小量更新的效率是最高的,就是是最神的啊,你都会直拍大腿,他怎么这么厉害,丑八怪C,然后这个是丑八怪D对吧?那你看一点丑八怪字样都没去掉。就说明什么是,只要他在同一层进行比较,哪怕他是进行乱比啊,哪怕是乱了,那他这时候也知道,哦,这个A是移动位置了,它并不是新的A,它不会把这个A拆掉,创建新A,不是它是移动位置。那那这时候你就说老师他怎么这么厉害,对,他里头有底层的一个啊,咱们到时候会讲,咱们会讲这个patch的底层代码是怎么写的,甚至还要手写出来,对吧?哎,他有这样的一套逻辑算法,能够特别让你命中啊,这叫命中啊,什么叫命中啊,这叫命中啊。
25:07
命中这个字念中啊,不是命中注定的命中,命中啊,什么叫命中啊,咱们后边会告诉你,就命中,命中率很高。好吧,哎,就同一层的话,它的那个效率非常非常高,然后不同层不是效率低,而是根本就不给你比,明白吧,哎,根本就不给你比啊好了,那这就是咱们这节课感受第一步算法的全部内容啊,相信咱们虽然只是感受,但是我相信啊,你肯定是有收获的啊,你肯定是有收获的,就这节课一下来,绝对绝对绝对是有收获的啊,这个是毋庸置疑的啊,毋庸置疑的,好的,那我们就呃把这次呃内容咱们大家自己去练一练啊,你们也用丑八怪这种测试法对吧?
我来说两句