00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们学习了will有的模板语法,循环遍历还是比较简单的,有使用V杠后,这个指令可以便利数组,也可以便利对象,那咱们呢,也用数组和对象,这种数组对象咱们做了一个小的一个例子,就是这个。对吧。便利,那和我们模拟了一下我们真实生产中的一个便利。是比较简单的,但是有一个是比较难理解的,这个KKVE标识,为什么我们一定要加这个K,那现在咱们ES,呃,ES link的语法,我们检查的时候告诉你必须加,不加不行,那如果你理解不了的话,那你怎么呢?你就直接加上就完了,对吧?但是呢,咱们既然讲课就得让你理解一下为什么要加它,对吧?那以后呢,你只要用V放后去检查的时候,那我们就直接加上K就可以了。这个K不光是在循环里边用啊,比如说表单啊,我们在切换的时候,我们也要都加上唯一的标识,能保证我们数据的一个准确性,那我们就得知道一下vuee的一个执行的view的一个执行原理,运行原理。
01:00
咱们一直说嗯,没它是虚拟倒对不对,那什么是虚拟道给大家介绍一下那。假如说这个是我们页面里边要显示的,因为浏览器在执行东西的时候,执行内容的时候,它只认什么呀?只认我们的DOM对吧,浏览器它就是按DOM形式结构对吧?比如说这个div里边的有ULUR里边有LYY,它只认这样的一个结构,这个结构呢,就是DOM结构,文档对象模型嘛,因为浏览器就是基于文档对象模型,然后去显示的一个对吧。那虚虚拟do什么呢?虚拟do就不是真实的do对吧,不是页面上那种真实的那个标签的层次结构,Do结构,那比如说我们在页面里边,这是我们的model,比如说我们的GS程序这块,我们就就我们自己写的那个GS对吧,我们上它叫做model吧。这块呢,是浏览器可执行的真实页面上,它解析的到对不对,那我们用程序我们写完的一个数据,写完的一个数据,比如说这里边我们有这样的一个数据啊,一对应的是A,然后呢。
02:04
呃,二对应的是B,然后三对应的是C,四对应的是D,然后来一个吧,比如说五对应的是D,那这在我们声明数组对象也是数据对,要是对象量都可以,那这个数组为什么我们能数据响应是变化到道路里边真实显示的时候,数据是变化的,我们这变化它就变化,那中间就加了一层,那这就是vuee功能,它会帮我们把这个数据形成我们假的就虚拟的,类似于HT结构,倒墓的结构,这就叫虚拟倒,先给我们形成这一层,把这个数据转成这一层。然后呢,唯一就把虚拟盗墓给我们渲染成真实的盗墓。然后浏览器才能解析真实的报,那这就是VE,它为什么做的一个,呃,View做了一个虚拟DOM虚拟报。然后再变成渲染成真实的到页面才能呃看到,所以加了一个中间这样的一个过程,就是一个转换,那像这样的数据,那我们虚拟端,我们在这块用的时候,肯定是把它形成一个页面上用到的一个格式,那同样其实跟这个是差不多的啊。
03:06
你就剪切一下,就复制下。这种拿过来,然后虚拟到转换为。真实的道路经过这一层,那有这样的话,虚拟当我们经过一层,那如果我们不用K去标识的话,如果我数据有变化,比如说我在这里边B和C之间,B和C之间在这块我想加一个什么,我想加一个W。你加一个W。那这个过程怎么办呢?我在数据这改了,那同样虚拟到我们这块就得完全的改一遍。他一看这个数据变化了,他不管三七二十一,如果再没有K的这个情况下,他也不会比对do,因为它是想的是什么,想要的数据变化,所以他在那虚拟do墓里边就先变化,再重新渲染这个道墓,那它是什么样的呢?变成12A。然后二杠B,然后三就不是杠C了,而是W变化了,因为这个我们在呃目录里边插入了一个这个嘛,然后四这个才是C,然后呢五才是D,然后六才是一,它所有的数据都会重新变离一下,重新渲染一下,生成引到五,然后呢再把重新渲染的这个。
04:12
这个值在虚到里边。卷的值变成这样了。相对把这个值就覆盖掉了,然后再重新渲染到页面上,页面去看到变化了。所以呢,我们不加K的时候,页面上一样是可以变化对不对。那如果加上KK什么就是唯一标识K里边你对应的值必须是。在循环里边必须是唯一的两个K,不能一样,如果一样的话,它就呃比对不了了,如果这里边我们用上K了,就变成唯一标识了,变成唯一标识,那么他一看这里边有K,如果这里边数据有变化,那在虚拟倒墓重新渲染之前,它会干嘛呢?它会先看一下这里边有,就是我这个变化的这个K,对吧?在虚拟倒墓里边,我们去对比一下,你看K有变化了,有变化了它就不是一个一个穿下去了,就在我们变化这块给我们新加一个。
05:07
它也会比对什么,这个有这块比,你看这块和我们新加的数据,他先跟这个对比,你看有变化,然后呢配这块有变化,所以呢,在我们这块去渲染的时候,它就在中间这块直接再加一个了。这些东西呢,就其他的数据就不用带,只在这块变化,然后一比对真实道墓里边对吧,真实盗墓里边这块你看有变化,只更新真实盗墓里边变化的数据,就相当于这样,所以有K的话,不光是效率高,有的时候呢,还能帮我们解决一些类似于啊,不使用K带来的一些缓存性的一个问题。不唯一缓存性的问题,比如说你切换表单对吧,那里边那些值有可能,比如说你从嗯电话登,假如做一个登录窗口,从电话输入电话登录切换到登邮箱登录的时候,那有可能你切换的时候它不重新怎么了,不重新渲染一下这个input表单,那你输入的电话号码在邮件登录的时候呢,这个电话号码还会在邮件的这个表单里边出现等等,加上K,我们就可以解决这样的一些问题。
06:07
所以呢,好多地方会用到K的情况,那我们就来模拟一下啊,因为使用K不光是我们说渲染的时候不需要了,对吧。那效率高了,另外也能真实解决我们一些缓存,类似于缓存那种方式这种存在的问题,我看给大家尽量模拟一下这样情况,让大家看到这个效果啊,所以呢,你不理解没关系,你就记着需要要我加K的地方,那就必须加就完了,对吧。你看这是没有用到K的地方,所有的都重新渲染一下,数据重新摆放一下,哪怕加入一个对吧,再重新加了也是这样的,那有了K之后,你在哪下,原来的数据是不动的,直接过来就行了,所以K是一个唯一的一个标识。让每个道,因为你只有有一个V1标识了,让这个道墓元素上有一个V标识了,这样的话,它才能虚拟道和道墓之间进行比对,哪个变化哪能没变化,是这样的一个作用。嗯,有点抽象,你不理解也没关系,不耽误咱们学习使用,给大家模拟一下知识的一个情况吧,比如说。
07:02
啊,我们在这里边。把这个就太长了,这我们是假如有多个我是可以敲开的,但是这个我没没用上,我们可以去掉啊,然后K这块里边数据这块对吧,然后这个位置。嗯。我把刚才删了一个方法,这个方法用上,把它去掉。然后呢,我们这里边儿。呃,把这个配方号什的。啊等等,但是这里边还告诉你们ES病检查的时候还有一些语法错误,我们没有办法说,因为强制应我把K加上,那我们把K加上对不对,那我们不加K呢,它就会ESD呢,报这个语法错误,那我们也过不去,怎么办呢?嗯,咱看能模拟,那我先把这个ESD呢关掉吧,啊在这个pack值里边找到这个ESD呢,你看这里边有ED的配置文件,要把它都删掉对不对,或者你看我这里边把这个改成甲。他不检查这块,那么这点的话你就跟他讲。
08:02
都变成假,然后呢,那最好是重新启动一下。语法有错误吗?对不起。没有错吧?嗯。来,正好来个甲,这换成甲。然后我们重新启动一下。一下。来送行的。直接卖啊。嗯,好了,重新写了,那这个是咱们启没启动服务器的时候,服务器就没关掉,关掉你看现在可以,但是呢,我现在就把什么去掉了,给关掉了以后就开启这个了,你看。关掉了之后,这块我们现在就可以没有K也那样存在,场序是好使的,所以K不是说必须的选项对吧,只是他按照那种语法规则给我们检查的时候,那我们最好是加上这个K对吧,不然不加K的话,是不要我们过的约束我们的代码行为规范的,那现在我想办法在他前面插入一条数据,那我想做动态插入数据,那我在这块来一个div。
09:15
呃,来一个div,然后呢,我们写一个表单,Input一个表单,在表单这块我们加一个按钮Bo to,我们来一个就是添加添加钮,添加按钮。我们刷新一下。啊,这个EB又提示我有错了。你看又提出这个。刷新。哎呀,刚才这个他又改回去了吗?可能吗。没关系,我先看一下代码有没有写错的地方,没有写错的地方,那我就重新。这块再再执行一下,再重新再启动一下,跑到这块。
10:00
又来啊。三下。又又写了新的节点了,新的节点,因为我只是把那个节点那个号关掉,对不对,新的节点的时候,他会这样的去提示。要么就把那个组片重新创建一个项目,怎么着不选择的ES就好了,就重重新启动启E,我把你启动一下就行了,来你看我们添加这个,添加这个呢,我们在这里边呢,写上一个一添加,我们要添加到哪去,添加到我们这个数组里边来,添加到我们这个数组里边来,那这个数组里边有个内幕,我们表单里边有个内幕,我这里边。块加一个吧,加一个name,那它是等于一个空的,然后呢,我这里面添加的时候呢,还需要有什么,还需要有ID对不对,一个新的ID,那我们就是新ID,那我们是12345新的ID,那我们就用的是六吧。新耐。啊,这个一会一会我再重启它就行了,先不管它新的ID是六,呃,我们一点添加的时候用这里边微model绑定上。
11:07
这样的话,我们在添加的时候,这个内幕变化就会,我们输入变化,这个内幕就会变化,所以呢,我们在这里边加一个事件,当点击的时候,我们加一个添加的方法,比如说ad添加的方法是click变成一个ADB添加的方法,用这个。当我们一点击添加的时候,就把我们输入的name,输入的内幕就会到哪,它双向绑定就会这个内幕就会变化,对不对,然后呢,我们就在这个ID里边,咱他新加一个就行了。加到这个数组里面,那你看一下我们在这里边加一个AB的一个方法。加一的方法在这里边。我们想在这个数组里增加,这是点,呃,Book。这个里边添加我们可以,比如说我在最上面添加才能看到效果,UN shift。加这个。啊,这样的话,我们就可以在这数组里加,当然这数组里接收的是一个对象,所以呢,我里边对象格式呢,得跟他一样。
12:04
一个大括对应格式一样有ID,那ID什么值呢?你看我们新ID,我说随便标志一个,但是我们从数据库取的话,你可以取到最后一个ID放到这块就可以了,那ID在这块它是六,那我们当前新的ID肯定是六,这个五下边的对不对?那我们既让它增加一下,增加完之后必须让它改变一下,所以呢,五加加放在前边,嗯,这是点new。D这块,那我现在加加放前面就是先用这个六对不对,比如加第一个的时候,然后加加,让这个六变成七了,下次我再用的时候是先用七,然后再加价对吧?是这样的一个过程,然后我们再加一个名称name name等于谁呢?等于我们这次里边name,因为我们我做了一个双向绑定。嗯嗯,后边我再给大家详细讲一下这个微法model一个双元绑定,那我在表单里边输入这个值变化,这个值呢,就会更改我这个值变化对吧?更改这个值变化,那这个值对吧?双绑定这个值变化了,那我这里边取出这个值的变化了,那我添加的时候就会加到这里边,这是在数组的前面去加入这个值啊。
13:05
然后再加上呃价钱PI,那我这就写固定吧,比如说128,然后再加上一个AC啊ACT这里边我就让它默认是甲,因为对象里边有什么值,我这里边就加什么值就可以了,那我们现在看一下它可不可以能够我们在前面加上呢?加上之后我们是不是还得把这个。数据这点name,因为我们双眼绑定了这个内,它一直在这嘛,我们在添加的话就不行,对不对,要把它清空一下,把清空一下。啊。有变化去查找。别生气啊。好,你看这边添加一个,比如添加A。你看,嗯。天价。一点添加,诶这里边没收到吗?Ad这个世界好像没有用了,我们再看一下啊。
14:00
Click按钮一点添加调用ADBADD呢,我们在这块将book里边前边我们加上一个对象,它有没有版错误,你看下调没调用到啊。嗯,这不。一点,尽量。这个不太好模拟这个东西。我真应该把那个下次再装创项目的时候不加这个,不然好多效果咱们是模拟不出来的。然后这里边我们随便写一个AA评价。哎,可以了啊,按照AB添加。你看机器。再说第天打印了,它有点那个渲染的过程它有点慢,你看12345是不是可以在最前面是添加这个东西啊,添加完这个表格我们清空对待,那这现在还看不出效果,怎么看效果呢?你比如说现在是不加K的情况,那我们比如说在前边在这块再加一个input,然后类型我改成c check box这样的一个模式。
15:05
检查。等一下啊。你起不起来,关掉。你看这前面有这个按钮,假如说我现在选的是细说加选中,那我再加个AA进价。你看这不是我选中的变成这个了,那我再添加一个bbb,它永远是第三个,因为它重新渲染嘛,它不匹配重新渲染,我选中的是第三个,它就一直在,这是第三个看到了吗?这不是我想要的效果,因为我原来选中的是哪个,对吧?我原来选中17个加速script,那这块还应该的是七个加script,那如果我现在在这块we这块加一个冒号K,它是V标识,等于那我们这块是ITM里边的ID对吧?是V标识对象里的ID,因为这里边每次ID都不同嘛,对吧,那我就正好改成ID,那如果改成这个唯一标识了。
16:06
我们再刷新一下,你看我还选择汽车价上,这样的话,他就相当于不重新渲染,这个不给我们重新渲染,就是还是去到我们不重新渲染一次,再放到那个真实到我这对不对,所以我选这个没有风渲染,那我选中的它就不会变化,你看啊位置它也不会变化,随便加一个A添加,你看还是吸数加符号了,ABB添加。西添加。对吧,那其他我就添加了,你自己看着办去吧,对吧,就可以了,这就是这个K的唯一标识,所以呢,我们在没有特殊情况下,那我们就必须把这个加上就完了,必须把这个加上就可以了,所以呢,它不光是解决这个重新渲染效率的问题,它还解决了我们有的时候一些类似于缓存的这样的一个问题,所以呢,需要加K的地方,你就加上就行了。嗯,你只要把E你开起来,它会强制告诉你下就行了,咱只是在模拟,因为你写的语法不规范,它强制不让你过对吧,所以呢,这样是不太好模拟,那你还是把这个烟蒂头开开。
17:05
啊,就可以了,下次我再重启一个数字没问题了啊,谢谢大家,这节课我们就讲到这里。这个只是简单理解就行了,你在实际上你加入K就可以了,记得对应的是一个唯一标识,这没问题啊,谢大家。
我来说两句