030_尚硅谷Vue技术_key作用与原理

好嘞，各位，那在这小节呢，咱们就来详细的探讨一下，在viewu当中，当我使用v for去渲染一个列表的时候，我所传递的这个key，它到底有什么作用啊，它的原理又是怎么样的？而且呢，也会把几个大家关心的问题呢进行一个说明啊，也是出去面试呢，比较爱问的几个点啊，首先第一个就是在view当中，这个key如果我写了他怎么处理？哎，我要是不写view怎么处理，因为你发现我不写K啊，它也是不报错误也不报警告的，对吧？各位好，还有一个问题呢，就是如果我要是写这个K，它的值到底用什么比较好？哎，是用便利时候的索引值比较好啊，还是说用每一个数据的唯一标识，比如说人的ID比较好啊，这个呢，其实是分情况的，OK，把这些呢，我们都会做一个说明，这一小节很重要，诶来把这文件呢复制一份，改个名字啊，叫做二后边的名字呢也换一下叫做key的原理，好把这个名字呢也给它复制一份，然后把这个网页的名字给它改一下。

然后呢，接下来我开始精简一下咱们的代码啊，总结过的东西直接删掉啊，然后呢，同学咱不用同时去研究便利数组，便利对象啊，什么便利字符串，你只要把便利数组研究明白了，它便利什么都是这个套路啊，所以说这个呢给它删掉，这个呢删掉，再往下这些呢，也给它删掉好了，诶就这样，那数据呢，我也用不上这么多，我把这car呢和这str呢，我就都删掉好了，OK，各位，嗯，那注意观察啊，在一这个文件结束的时候啊，最终的最终我选择了用index，就是便利时候的索引值是不是作为它的key了啊，其实我就这么做呢，是没问题的啊，就我目前的这个功能来说啊，那我先粗略的给大家说一下这个K呢有什么作用，同学，这个K就是给节点进行一个标识，就相当于人类社会中的身份证号，哎，就这么回事儿，说老师那为什么要有这个东西啊，人类社会中没身份证号他就乱了，对吧？俩张三不知道谁是谁了。

那在这个代码里呢，说老师我感觉好像不写这K啊，他也没有错误呀，说老师你看我不写啊，打开之前咱也看过了，来刷新一下，同学，你看有什么警告吗？没有也没啥错误啊，但是不代表说这么写以后永远都是对的，你知道吧，好了，慢慢来，各位啊，我先写着这个key啊，写上冒号，Key用谁呢？用index，然后你听我说各位啊，就我目前这么点功能啊，只是便利一个列表，只是对列表进行一个展示，其实你用ind，我告诉你一点问题都没有，但是有一个情况啊，它就会有问题，什么情况呢？我给你演示一下，各位呢，是这样啊，有两种讲法，第一种就是我让你看不到任何的问题，我就干巴巴的给你说，哎呀，这么写比较好，一顿分析啊，你也没看出来说怎么写他不对是吧，还有一种方式呢，就是我给你故意制造点问题，哎，让你有点想不通了，然后我再告诉你，其实它是这个原理，我选择第二种啊各位来看着，我在这儿呢，给你写一按钮，哎名字呢叫做添加一个老。

刘，哎，然后你注意啊，我这个老刘啊，添加的有讲究，你可以在整个数组的下方追加一个老瘤，你也可以在整个这个数组的上方啊，给他添加一个老刘，我选择哪个呢？我选择把老刘放在张三的前面，为什么我这样做呢？因为如果你把老刘啊放在王五的后边，它不出问题，不出问题我的讲的东西就没有说服力，对不好，添加一个老刘，那我得给他绑定一个点击事件啊，我也慢一点讲，大家好好理解，就叫做ADD是吧，就可以了，然后呢，就得有这个methods是吧，跟data呢是平级的，先上这个methods a好，首先呢，慢慢来，我是不是得制造一个人的对象呀，走ID写上，那根据这个事物的发展，001002003，我在这老刘的ID是不是应该是004呀，啊，咱这说啊，各位如果真实项目开发这ID啊，不是我们前端人员维护的，你觉得呢。啊，那同学万一我这哪天喝多了是吧？咔，我写代码啊，我把老刘也写成002，那不废了吗？当有一天李四被删除的时候，你发现，诶，好像老刘也被删了对吧？诶，真实开发是这样的，我们只需要把红色的数据传给服务器，然后呢，服务器把数据放在数据库里，数据库能为我们生成这ID的啊，但是在这儿呢，我们不能写的那么复杂，我们就简单来，好吧，各位数据库给你维护这个ID也是有规律和套路的。OK，我在这写一个最简单的，就是自增长好吧，12I，这就是四好了，那名字呢，肯定是老刘好了，那年龄呢，这样我写的大一点，比如说写40岁，OK，一个人的信息是不是准备好了，接下来怎么办？是不是把这个数组的前方加点东西，那是不是this.persons点是不是叫做on shift往前放呀，放一个什么呢？哎，一个P，哎这说有点不太好听了，放一个P好了，各位就把老刘呢加到前方了啊那是这样啊，这按钮呢，我只想让你点一次，所以说我在这儿可以。

加一个修饰是不是once，诶一次性的好了，右键呢，给它打开啊，刷新一波，值得你注意的一个点呢，是这样的，各位啊，我先不点那个添加，老刘，你先看一下整个这个结构啊，你打开这个，呃，Div里边这不是有个u Li啊各位你看这儿，我在写模板的时候，我问你每一个Li有没有一个属性叫做K，有值是不是遍历时候的索引值，是的。

但是你发现最终它生成这个页面上可用的这个真实DOM的时候，你发现每一个Li貌似都不再拥有那个key属性了，对不？为什么呢？说一下是因为这个key呀，是V内部在用的，你模板写的时候的确写了这个key view呢也的确用了view用完了之后给你弄成这个真实盗墓的时候呀，就把这个东西给干掉了。但如果你不写K各位你写A你就明白了，你回来你再看啊，打开这个ul，你发现是吧，因为A不是属于特殊的属性啊是吧，也就是说的再直白点，各位所有的元素身上的这个key啊，都被V给征用了，你不能用了啊，因为V已经说了，这东西就给我用了，你写了最终它也是没对吧？哎，好了，这会儿你要知道啊好，那接下来呢，你瞧着各位回到页面当中，张三李四王五都有了吧，来添一个老刘走你。

同学，咱不说别的啊，警告和错误有吗？没有页面显示正不正常，正常老刘出没出现在前方出现了啊绊面上一点问题都没有，但是我告诉你它其实存在一个很严重的效率问题，OK，说老师那你这你这咋说，那你看我通过这个肉眼观察，没错误，没警告，然后效果时间还正常，完了你就告诉我效率低，你这我不承认，哎，同学，我就是先告诉你一下他效率低，一会儿我能够有理有据的把它说明白，好，那这个问题你可能觉得老师那就呵呵了呗，是吧，那你说效率低就低吧，就等着你分析，哎，同学，不光有这么一个问题啊，我再跟你说第二个问题，你能看的就更直观了啊，然后呢，我这么写啊，让每一个人这Li里面除了有人的名字，年龄啊，每一个人的后边啊，还跟上一个input框，你注意这input框我是写在Li里的，OK，各位，哎，是属于每一个人信息里的一项。

回来。说老师这能咋的一点，老刘这不也正常吗？老刘40这没啥问题啊，各位啊，你把那输入框里面你输入点东西。他就有问题了，张三后边张三的信息，李四后边李四的信息，王五后边王五的信息，各位我问的是当我添加一个老刘的时候，我们所期待的样子是什么样的呢？在这个位置出现一个老刘杠40，然后后边是一个空的input框，你说对吗？好了，你看效果啊，由于你现在用index作为key了，就会出现这么一个问题，很诡异啊，各位看着添一个老刘。说老师也没啥事儿啊，哎，这事儿大了去了，你自己看。哎，老刘后边居然是有张三的信息。哎，张三后边居然是李四的，哎呦喂，同学你发没发现这数据啊，他都串了一位，你看啊，这个红色的张三应该出现在这个蓝色的张三18后边是吧？也就是应该是这么一个对应关系，哎，那同理，这个李四呢，其实应该也出现在这个李四19的后面，应该也是这么一个对应关系，这王五呢，同理应该出现在这个东西的后面，对吧？然后这个空的input框反而是应该出现在老刘后边的，你觉没觉得都形成了一个错乱对吧？都往上窜了一位同学，那你说这回咱是不是实实在在观察出来了，这玩意儿他有问题呀，你说对吧？哎，然后呢，我就可以跟你去探讨这个事情了，刚才我说的效率低，我承认这玩意儿肉眼观察不出来，但是这个你不得不承认它有问题对吗？哎，我跟你说你错在哪了，你错就错在了你在这种特殊的情况下，你用了index作为key，说老师啥特殊情况呀啊，你别急，看着同学我换一下，我不用index，我用p.ID各位看看。

出不出这问题啊，各位咱慢慢捋一遍，刚才我用了index是不是出问题，你先不用记场景同学，你先把这几个规律记住了，我用index出没出问题，出了，好，那现在我用谁？来各位再给你写一下，现在我用谁？是不是p.ID这叫啥？是不是数据的唯一标识，哎，看看它出不出问题啊各位我先告诉你，其实它不出问题，好那我们看一下各位啊，来走张三后边张三信息，李四后边李四的，王五后边王五的，来注意走你同学出问题吗？不出问题好回来，那你说如果我要是不写呢，是不？各位，哎，咱再看看刷新啊，张三是张三的，李四是李四的，王五是王五的，来走你同学啊，是不是出问题？那么综上所述，各位就是关于这个key，在刚才我写的这种特殊的情况下，我想问大家，你说写index行吗？不行，那你说我要是压根都不写呢，我写一个no就不写呢，也不行，我只有写谁才是没问题的呢？p.idp.id就是属于数据的唯一标识，你说对吗？好了，那同学。

学想把这个问题说明白，那我们就必须得对两个人比较熟，一就是key的工作原理，第二个就是虚拟do的那个对比算法，同学，我们之前说过虚拟盗墓之间会形成一个对比的，那么这个对比算法你也得了解，为了能把问题呢一次性的就说懂，所以说呢，我做了一个PPT的动画，好吧，各位，哎，就在这儿呢，嗯，就在这儿呢，我已经提前开好了，然后呢，我把这个动画呢放映一遍啊，然后咱们一起去观察一下，来慢慢来啊走。

很好理解的啊，同学你看这啊，我在分析用index作为KOK，好了，走开始啊，你先关注这个区域，这个区域啊，走一切都是因为你写了这段代码是吧？同学我就不把所有的代码贴在这儿了，我用了四个字叫初始数据。同学张三李四王五，ID分别是一二三十，89、20，对吧？好了，这是你写的数据，同学，View是不是得拿着你的数据生成虚拟do，它不是说一下子直接就把这个数据变成页面的真实do，它是有流程的，哎，把你的初始数据生成虚拟盗墓，那最终这虚拟盗墓呢？就是这样的，然后同学说，老师不对，你不说了吗？这个key不能有，同学，我说的是这个真实盗墓上是没有这个key的，虚拟盗墓同学必须得有这个key，没有这个KVU就没有办法高效的工作了，对吗？这是你的初始数据生成了初始的盗目，我们管这个呢叫做reno啊，叫做虚拟的这些节点，对吧？同学，就截止到目前你的页面上啥也没有，只是内存里面出现了诶三个虚。

你的节点对吧？编号分别是012对吗？索引值同学，因为张三是第零个，李四是第一个，王五是第二个，所以说是012对吗？然后里边是不是有这些文本的这个节点，张三18，李四19，是不是还有一些这个标签节点对吧？Input是不是在这儿呢？好，各位，那接下来呢，他做这么一件事儿，就是把你的虚拟盗墓转为什么呢？真实盗墓，OK，页面上就是张三18，李四十九万五二十对吗？各位好，接下来最主要的一个事情出现了，用户是不是在这输入东西了，那同学你一定听好我说的话，用户是在什么do里输入的东西在真实do，同学，这个虚拟盗墓在内存里呢？用户是鼠标碰不见的，用户能操作的全都是真实盗墓。同学你写了一个虚拟的按钮，那你说用户怎么点呀，不放到页面对吧？所以说用户操作的都是真实do，所以说用户输入的这些东西其实残留在哪个里面了呢？真实do上好了，让用户开始输入来注意了开始走是不是输入完了。

这个时候同学初始化流程就结束了啊，这个时候呢，你关注这边数据开始更新了，来走，你新的数据出现了，所谓新的数据就是老刘出现了，而且最主要的是各位老刘是不是排在了所有人的前面对吧？我是一个逆着这个顺序添加的老刘，随后呢，他就得根据新的数据生成一个什么呢？哎，新的虚拟do好走，就是这样，你看新的虚拟do啊Windows，那你看K是0123，这个时候你注意老刘的K就得是零了，为什么呢？因为你用index这个索引值座为的K，老刘排在数组里的第零位，那所以说他的K是零，那以此类推，张三李四王五分别是123，对吗？各位，哎，里边带着什么呢？这个input这个节点对吧？好了，你说接下来他干嘛呢？各位。

同学说老师简单，那接下来我都会说了，接下来就把这个虚拟盗墓咔嚓一下子就转成真实盗墓了，同学他要是这样做啊，拿着这堆东西直接就往真实道上转，那你觉没觉得view就做了一个很无聊的事儿？你多了这么一个环节吧，虚拟盗墓同学你拿着这个数据直接就怼成真实盗墓，它不快吗？那你说你为啥非得再整一个虚拟盗墓在这中间绕一遍呢？所以说各位你听我说啊，接下来它并不是像你想的那样，拿着这个新的虚拟盗就重新给你构建整个页面，不是这样的，各位，也就是接下来它并没有直接去走绿色的这个箭头，说老师，那他走哪儿了呢？听我说各位，右边是不是新的虚拟道，左边是不是旧的初始的啊，你说旧的也行，说初始的也行，同学有两份虚拟盗墓是不是摆在VU的面前，那么vu要进行一个最重要的动作，就是虚拟盗的对比算法，那么对比的时候，同学他就依赖着谁呢？我告诉你就依赖着这个T。

他离不开这个key啊，那怎么对比的呢？接下来就靠我的嘴去给你形容这个对比的算法，当然我们也有文字性的总结呢，是一会儿再说好了，各位，首先呢，它是这样来到新的虚拟do里面，按照顺序先取出第一个来走。诶，就是老刘30这个，然后呢，他就问，哎，说你这个虚拟盗墓你的标识是多少，他说我是零，然后呢，各位他来到旧的或者是初始的这个虚拟盗墓里面也去找，跟这个老刘30拥有着一样K的，诶那个节点是哪儿呢？是这儿对吧，其实是张三这个啊，首先他得找有没有各位你这个老刘30他这个编号是不是，或者是这个keep吧，标识是零吧，那你说这边有没有啊，有所以说他找到了，哎，就是这个，还说老师找到了，那咋的呢？找到了就要对比里边的内容，然后呢，他是这样的观察一下啊，说这里边有两个节点，第一个节点是老刘30这种文本节点，还有一个呢，就是input这种标签节点啊，那接下来呢，他是这样做的，各位看着啊，走，拿出老刘30和这边的进行对比，发现这边却是什么呢？张三18，那你说这一样吗？不一样，那最终的结局，你看着我在张三18身上打了个叉，打了个。

差是啥意思，就是对比的时候发现他俩不一样了，说老师不一样能怎么着呢？啊，你别急，你就先知道这边老刘30和这边张三18呀，他对不上了，对吧？好了，接下来呢，继续对比啊，把老刘30那条数据后边这个东西input，哎，拿到了，和这边的input呢进行一个对比，现在重点来了，各位你要明白一个事情，我在对比的是两个虚拟，对吗？同学你看看黄色框里的input和这个里边的input，我问你同学他俩一不一样一样，我知道各位可能说老师不一样，因为这个里面还残留着张三的信息呢，各位对比的不是真实盗墓，你所输入的东西在真实盗墓里呢，人家是在内存里边对比的虚拟盗墓，所以说经过他的对比，他就发现，哎哟，你看你这里边有一个input元素，我这里边也有一个，你那里边写的是啥？Type等于text，诶我这也是同学对比来对比去。

标签名一样，标签结构一样，标签所有属性都一样，你说最终对比的结果就是。诶，一样好了，那接下来的重点来了，刚才对比不一样的怎么办，一样的又怎么办呢？各位听我说他会这样做啊，如果说对比之后他不一致，说我这边是老刘30，那你这边哎哟，你是张三18呀，那算了，咱俩不一样，不一样的结果就是不能复用，啥意思呢？他的意思是这样说老刘30，我多么希望你这也是老刘30啊，你这如果也是老刘30，那你这边的老刘30曾经不是转成了真实盗墓吗？那我这边就直接咋的，哎，拿过来就用吧，但是可惜就可惜在哪儿呢？这边是老刘30，这边是啥张三18，所以说同学你看啊，事情就是这个样子的，他对比了是吧，好了，他开始呢，把这个虚拟盗墓啊转成真实盗墓，然后呢，他这样做的，哎，也得有数据对吧，然后呢，同学老刘30跟这边不一样，你复用不了了，他只能把这个新的虚拟盗母重新转为一个真实的。

M节点，哎，那个文本的节点是老刘30你看着走来了吧，而且你看我做的动画啊，各位你看老刘30打哪来的，是不是从上面掉下来的，掉下来的是啥意思？就是这老刘30真的是拿这个新的虚拟盗墓生成的一个全新的真实盗墓，说白了吧，老刘30咋的新生成的？哎，那接下来注意了，各位这个input是不是也得往页面上放啊，但是你要知道，刚才呢，你拿着老刘30的这个input和张三18这个input，这个虚拟的这俩input对比，发现是一样的，那一样的结果就是复用，复用是什么意思呢？他这个意思啊，他说你看。

我老刘后边吧，有个input，那你看你这边也有个input，你看我这条数据K是零，你这也是零，那咱俩就是前前后后，咱俩其实是一个体系的呗，是吧？哎，那你这有input，那咱俩还一样，那就这样吧，你这个input啊，就张三后边的input，你之前一定把这个虚拟道曾经转换成过什么呢，真实道墓，那你看啊。这个黄色的input是你的前身，你拿着这个呢，转成了真实do，完了，我这边呢，和你这边的虚拟do还一样，那就这样吧，我就没有必要啊，把我这个input再进行一次真实do转换，然后往这儿一摆，那我就不这样了，他说那我怎么样呢？我就没有这条线了啊，我就不再把这个虚拟的input再变成一个啥呢？真实的input，我就这样吧，反正页面上之前都有过一次这个了，那我就拿过来，这个就直接在我这儿用吧，明白呗，啊各位什么叫复用，体会体会。

啊，就是他经过对比之后发现，诶你这有input，我这也有，你这input呢，早就变成了一个真实的input了，那咱俩还一样，那我就别再变了呀，我就拿着你之前变完的东西在这用呗，所以说重点来了，各位他接下来这么做，拿到这个张三18直接就放在这儿了，对吧，各位他对比的是虚拟盗墓，对比的结果他决定了还是用之前张三的那个真实的input，那你说最终导致一个什么问题呢？之前用户的输入是不是还残留在这个里面呢？对吧，各位，那你说以此类推，这个我分析完了，各位，你说接下来再分析那张三18来，咱再走一遍，我就没有图了啊，就靠我这个鼠标去跟你说，同学，你看张三18这个拿到了它的K是多少，一到这边是不是找相同K的，有没有有然后呢，我这边是啥张三18这边是啥李四19，那没没办法了，咋办？张三18，诶你看注意看是不是又从上面掉下来的，同学，其实我问大家的是这张三18你说能不能复用，能，因为我之前是不是有张三18，但是错就错在哪儿了呢？你非得用那个index作为key。

原来是这个顺序，后来你把顺序打乱了，那就造成什么呢？它整体就全都不能复用了，其实说白了，同学这张三18完全可以这样，把之前的张三18这个文本节点过来，是不是在这就用啊，但是由于你的错误编写，那只能导致张三18现生成，对吧？各位好了，那你说接下来呢。然后就对比张三18后边的input和李四19后边的input居然是一样的，于是乎拿着李四的19刷给谁用，张三用OK，分析完了，那同理就再不墨迹了。同学，你说李四19是不是也得是重新生成，然后李四后边用的是谁？王五20这个你说对不好了，最后一个出现了，注意分析，各位走，王五要出现了，请问王五的K是多少三？请问原来的这个虚拟盗墓里面有K等于三的吗？没有。

那同学没有，那还对比什么呢？既然都没有，那就只能这样了，王五20从上面掉下来，转成了真实道目，那王五后边input也得从上面掉下来，这是一个真实的，而且你注意啊，这个input是新生成的，新生成的里边当然没有输入的东西了，没有残留着用户的输入了呀，那同学你明没明白为啥这块错乱了对不？各位啊，那我知道有些同学说，老师那你套路了，我你要把那老刘30啊，你别给他往张三前边加，老师你把那老刘30或者老刘40你给他追加在王五的后边，那不就可以了吗？所以说嘛，同学确实是这样，要不咱咋说你用index作为key，不是说它一定有问题啊，那你说什么时候有问题呢？咱就可以总结了，各位就是如果你对数据进行了破坏顺序的操作，你比如说同学你你依赖谁，是不是依赖那个index索引值，我就问你现在李四索引值是几，是不是一，这是不是零，这是不是一，但是由于你打乱顺序了，你看到这边同学老刘是零，哎，张三是一，哎，李四是几二，那这不就完了吧，对吧，这就完蛋了呀，所以说这回知道为啥错乱吧，好了，我还有一个图，各位能分析明白啥呢？就是为什么用那个唯一标识啊，它就是没有问题的，但是我先不给你看那个图，同学。

我用这个已经把问题演示明白了，就是东西为什么错乱了，我再说另外一个问题，就咱之前说效率低是吧，问说说他为啥效率低，我问你各位，张三18，李四19，王五20是不是都是之前已经存在的文本节点，但是由于你的这个错误操作啊，同学，那你说老刘30是不是新生成的，那你看刚才的张三18，李四19，王五20我没记错的话，好像都是从上边掉下来的吧，那也就是说原来这三个你是不是一个都没复用，哎，所以说同学你看是不是效率低啊，但是吧，这个问题暴露的不是很明显，对吧，哪个问题暴露的最明显，各位，哎，就是这块一旦有输入类型的节点，那你这可就完了，是吧，各位，好了，那我们再分析一下，为什么用ID作为K它就没问题呢？来。慢慢分析，同学你看着啊，初始的数据对吗？变成诶虚拟盗墓对不有001002003各位啊，可不是那个索引值的耳时数据的唯一标识啊，张三18INPUT 001002003，好了，不墨迹了，走是不是转为真实道没呀，走用户是不是得输入东西啊，来走啊，然后各位数据不是得更新呢？来走诶看着老刘是不是放在前边了，好，根据新的数据生成新的虚拟盗墓来走各位老刘是004，张三还是001，李四是002，王五还是003，那接下来各位是不是得形成一个DOM的dif算法了，也叫那个dif算法，其实啥意思呢？对比那个词就是DEF是吧？哎，有一个叫做dif这么写的各位啊，叫做dif。

Di啊DF就是对比嘛，对比算法好了各位，那他的套路就是先来到新的虚拟do墓里面取出第一个老刘30，请问各位啊，T是多少004，那么他拿着这个呢，去旧的到我们里边找发现，诶各位咋的？嘿，没有004对吧？那怎么办呢？就是别对比了，这边都没有，那你说怎么办？哎，他就这么玩了，瞧着各位啊，那没有也得转换呀，看着老刘30掉下来重新生成，并且后边那音input也得一起掉下来，你说对吗？都是新的，好了，继续走，拿到这个张三十八零零一吧，看看这边有没有K也是001的呢？有，而且你注意观察，他拿到右边的张三18和这边的张三十八一对比同学，请问对比成功了，他拿到这边的input和这个input，请问对比的结果是成功了，成功了的后果就是要复用第二条数据啊，这就出现哈走张三18整个这一条同学，包括那个文本节点和这个元素节点都拿到，然后怎么办诶是不？

就给这用对吧，各位，我这张三18可不是从上面掉下来的，对吧？我这个input框也不是从上面掉下来的，都是一个复用，你说对吗？那以此类推同学，再往下，那你说拿着李四19这个节点是不是002，到这边是不是有002还是李四19，这边还是李四19，发现一对比，最终都是对号，那拿着李四这个里边的文本和这个元素input是吧，都作为这去使用了，那再以此类推同学，谁呢？王五拿过来是不是作为这用？那同学我问你整个过程当中，其实啊，它只有两个节点是新生成的，就是老刘30和后边的这个一个这个一个这个剩下的这些同学，所有这绿色框里的东西，你觉不觉得都是复用的？同学，我问你效率高不高，高，再其次有另外一个问题，数据错乱吗？不会错乱，为什么呀？因为同学李四002，李四到什么时候都是002，无论你把这老刘放在哪儿，李四他都是002，对不？各位这不就解释清楚了吗？好，那这是靠图呢去说明，哎，大家可能也都知道了，那咱们。

再说说另外一个问题，各位，就是我这些分析都是建立在你写不写K写，说老师，那还有个情况就是我如果不写这个key，它咋也出问题呢？说老师这儿听明白了，用index出问题，那我不写它怎么也出问题呢？哎，同学一句话就解释清楚，如果你在写这个v for便利列表的时候，你没有写这个key，那么view会做一个默认的动作，就是把便历时候的索引值自动就作为这个key了，哎，说白了各位就是如果您没有写K，那V帮你补了一个K，那这个K是谁呢？就是这个index，那有些同学可能就不知足了，老师啊，那V咋这么不讲究呢？那你说如果v you给我补的那个K要是数据唯一标识，那你说那多好呀，老师，那这问题不就不出现了吗？以后呢，我也不写这个K了，对不对，咱也不用分析了啊，也不用去记这个东西了，同学是这样的，V并不知道哪些东西是是数据的唯一标识，同学那就比如说啊，这条数据在V看来。

哪知道这东西ID是唯一标识啊，你说对吧，各位说老师那底层写死吗？用ID，那我问各位，万一你是一个比较大型的网站对吧？数据的唯一标识是用用户的手机号呢？是用邮箱呢？是用学号呢？哎，所以说同学你觉不觉得V没有办法穷尽的，只能靠你自己告诉他一声说哎，哥们儿用哪个哪个作为这个唯一标识，明白了不？哎，所以说同学回来啊，咱就能解释的清刚才为什么会出现这问题了啊，那同学我们试一下，如果你往后加这个老刘，我用push，那你看一下各位啊，我写K了吗？没有，那你看有这问题吗？其实也没有，各位啊，张三18，李四19，王五20，我问你同学，你没有写这个ku，是不是帮你补了一个，咱就拿李四说话，我问你各位李四的索引值是几？一定是一张三是零对吗？你在后边加了个老刘，我问你李四的索引值是不是还是一样，哎，那所以说各位你再走，你看他是没有什么问题的，对吧？所以说你可千万别这么说说，哎，用index可就废了那key啊，一用index就完。

看了不是的，得看场景对吗？各位好，那把我刚才整个图和我的语言，如果要是形成这个文字的总结呢，咱总结一下啊，我提前写好了啊，说老师这么多呀，其实没多少，来读一下啊各位。说这个react和view中的key呢，有什么作用啊，或者说这个key的这个内部原理，其实呢，之前看过我那个react视频的小伙伴啊，你就知道咱们在react里边其实是分析过这个问题的，但是吧，咱在react里边呢，没有做这么详细的PPT去解释是吧？好了，来读一读这啊同学，虚拟盗中K的作用啊，Key是虚拟盗的标识啊，当状态中的数据发生变化的时候，或者咱就这么说，当数据发生变化的时候，View会根据新数据生成新的虚拟DOM，随后进行新的虚拟盗墓和旧的虚拟盗墓的差异比较比较规则如下，如果旧的虚拟盗墓中找到了与新的盗墓相同的K，你比如说啊，说我这边有一个是001的，你那边有没有啊？他说诶，我也有，这就属于啥，找到了，找到之后再对比盗墓里的内容，如果内容也没变，注意各位重点来了，直接使用之前的真实do，这不咱刚才说的吗？啊，你就比如说举个例子啊，说呀，你就的虚拟DOM里啊，有一个这个A标签，那这个A元素。

啊，然后你的新的虚拟盗墓里呢，也有一个这个是吧，然后它就对比啊，这个标签里的内容以及标签属性对比来对比去发现都一样，它就不会再把这个新的A标签重新往真实盗墓转了，那咋办呢？之前你这个东西肯定转过一次真实盗墓，对吧？把你之前转过的那次东西拿过来，他就用了，这不就是复用吗？同学，这也不就说明白了，为什么人家要设计这个对比算法吗？是不是为了复用节点呀，或者是复用这个do呀，啊来，如果盗目中内容改变了，那怎么办呀？同学，虽然咱俩K相同，但是改了也就是之前咱说的啥呢？这个对吧？各位虽然说哎咱俩一样，但是我这是老刘30啊，你这是张三18，那我就得重新生成了，对吗？各位好，哎，那看第二个就是就在虚拟弹幕中，如果连找都没有找见跟他相同K的那个盗墓元素呢，那怎么办呀，各位那就没办法了，你就直接创建真实的就得了，你说对吧，两个情况它会创建真实的，第一个对比咱俩key一样，但是内容不一样，好了重新转换对吧，还有种情况就是。

是压根没有人跟他比对吧，没有这玩意儿，那肯定就得重新转换了是吧？好，那这个用index作为key可能引发的问题啊，第一个如果你的数据进行了哎，逆序添加啊，逆序删除等破坏顺序的操作，那会这会怎么办？产生没有必要的盗墓更新界面的效果是没问题的，但是效率低，哪种场景呢？就是这种场景，各位来，你看着你给他写一个key英文的啊，Key完了指你用啥呢？你是不是用这个index啊，各位好。

那我问一下啊，你想想，如果页面没有这input框，它就对吗？各位咱之前也说过了，是后边没有input框，但是当你添一个老刘的时候，你可要知道同学那张三李四王五是不是也都是全重新生成的呀？那你说各位这就是一个什么呢？界面效果没问题，但是效率是不是有点低？一旦你的结构当中有输入类的盗墓，同学这个东西在开发当中太常见了，我便利出来的结构是有输入功能的，那这个时候同学那就不是效率高低的问题了，不是那么简单的问题了，那就是错误的盗墓更新界面显示它都是有问题的，那么开发当中我们到底如何选择这个T呢？来，最好同学你使用每一条数据的唯一标识，你比如说ID啊，手机号，身份证号，学号等等这些唯一值，能够唯一标识你身份的，OK啊，来看第二个就是如果不存在对数据进行逆序添加，逆序删除等破坏顺序性操作，仅仅用于列表渲染，就是我刚才所说的，我没有添加老刘这功能，那这个时候同学你用啥都无所谓对不？那当然了，你。

不能这么用，我说的无所谓是index和V标识无所谓，你不能这么用，这么用肯定废了，对吧？哎，好了，回来啊，所以说这个仅用于展示同学，所以说你用这个index打的是没有问题的，这回是不是就说明白了，各位，哎，那我们的原则呢，就是这样的，各位有唯一标识，你最好养成一个习惯，就是用什么呢？唯一标识，那可能有一些小伙伴说了，老师啊，那你说万一我从后台请求回来的数据里边他没有这ID，那咋办呀？哎，同学，听你那意思就是你请求回来一个人员的列表，它只有绿色框这些数据呗，同学不可能。

不可能，咱就说这么一个问题，各位，还有一个人也叫张三，但是他的年龄呢，是80岁，现在你想删除这个张三，我问各位，你不把张三的ID，或者把张三的这个唯一标识你传给后台，后台怎么删呢？对吧？所以说同学但凡是一个合格的后端，一定给你返回数据的时候是有数据的什么的唯一标识的，好吧，各位，哎，咱就把这个K的原理呢，就给大家说了一下，OK，这回明白了吧，啊，那这一小节呢，我们停。