00:00
好嘞,各位,那在这一小节呢,我们就对vu监测数据改变的这个原理呢,进行一个大总结,也就是说呢,我会把56789里边所讲的东西呢,形成一些总结性的文字啊,也便于大家呢自己下去整理笔记,还有就是呢,我要带着你啊再做一点小练习,老师咋还做练习呢,这里边不各种列表都各种练了吗?是这样的啊各位我在讲56789的时候呀,同学你发没发现有一个特点,就是我一直在浏览器的控制台里边去给你操作数据,我一直都在VM点怎么怎么地,然后在点怎么怎么地,然后掉了哪个哪个方法,然后说你看同学他变了是吧,为啥我要这样做呢?因为这样做呢很节约时间,很快,对吧?我们去分析原理的时候,特别适合在控制台上直接搞点代码,但是如果这个东西没有你自己实实在在写出来,敲在这个编译器里面,容易造成什么呢,你就走马观花就忘了。所以说把。
01:00
56789里边所讲的每一个API,在十里边都给它对应做个小练习啊好,那我们就打开这个十啊各位我提前的写好了一些东西,你不用先看这个结构,我们先观察一下数据,好吧,各位跟之前呢,都是很类似的,Data当中呢,只有一个配置项,就是学生啊,不再有学校的那个配置项了,那学生呢,有名,有年龄,有爱好,还有一堆朋友,OK,然后呢,我把这些基本的信息啊,就做了一个展示,你瞧一下各位H1告诉你这是学生信息,然后这些H3呢,都是展示什么姓名啊,年龄啊,然后在这儿便利一个啥爱好啊,那在这儿呢,便利他那一堆朋友们,哎,就这么点基本的展示,好吧,各位来,那我们打开看一下啊,各位走对吧,一个基本的信息好了,控制台呢,咱也给他开好,那接下来啊,我就要在红色框的位置去插入各种小按钮。不同的小按钮呢,有不同的功能,目的只有一个,让你练练刚才讲过的API,好了,开始写一写,我把那些代码啊,可就都拿过来了,那些按钮你看好了啊走。
02:08
哎呀,说老师有点多呀,不多啊,都很简单啊,先一个一个来吧,是吧?啊先完成第一个说一点击这按钮啊,年龄就加一岁,那你说怎么写,肯定得有个点击事件对吧,然后咱之前也聊过,如果光标闪烁的这个位置啊,你的逻辑很简单,可以直接把逻辑写在这儿,就不用再写那回调了,对吧,我现在这个呀,就很简单,不就是学生的年龄加加吗?这么写是不是就可以好了,回到页面看效果,当我点的时候,你瞄着这儿啊来走走走走是不是变了好了,实现了再往下,同学这个什么呀,说添加一个性别属性默认值是男,也就是说什么呢?之前呀,我不知道他还得需要性别,以后我才知道,我得现去给他添加一个性别,并且这性别还得是响应式的,就以后这性别一改页面呢,哎,也得跟着变好来,那咱写写啊,同学,起个名字吧,这叫做爱的sex,添加一个性别好了,在这。
03:09
你得配置一个methods走,里边写上添加性别,那这怎么写呀?哎,老师,简单拿到学生然后操作不就得了吗?老师,我写this,点学生点性别等于难,请问这么写对吗?同学你可别忘了呀,咱不是说了吗?当时没有的东西你要这么加,View不认,它也不是响应式的,有两个办法了,大家还记得吗?第一个办法是view.set然后传几个参数,三个,第一个参数是给谁添加东西给谁呀?说老师之前不是这么写的吗?VM点下划线date.student不是这么写的吗?同学,在这儿其实不用这么麻烦,同学,我问一下sex里边这个Z是不是就为M,还有就是人家做了数据代理,你是不是不用下划线data对吧?哎,就你得对这些东西吧,都知道他们之间是怎么个关系,先有谁后有谁,谁的东西又来自于谁,然后你才能大胆的写下去,你说对吧?同学我问一下就我这么写能不能明白,如果说老师我真有点不太明白了,那赶紧把咱之前讲的这些什么数据代理MVVM啊,赶紧再过一下是吧,各位好了,来往学生身上加,加啥,加一个sex,那值是什么呢?默认值是男可以吧,OK,加完了说老师,那看看效果吧,你别急啊,同学,页面上展示人的性别了吗?没有啊,那展示一下呗,不叫年龄了,叫性别,好,那这写一下性别可以了吧?哎,这回呢,咱再来看看啊,哎。
04:42
点击这个走同学是不是有了,哎,那咱能做的再好一点,就是没有性别的时候啊,它不要再出现,所以说写个V-if啊或者V-show呢也行,好了给它写在这儿,来我们看一下啊走对吧,来刷新再看一下是没有性别的一添加,诶是不是有了呀,OK,好了,而且最主要的是这个性别还是响应式的,对不?各位咱之前聊过这问题是吧?好了,回来那咱测试一下吧,比如说再来一个按钮行吧,各位,反正都这么多了,来再来一个叫做修改性别,哎修改那咋写,可以简单点写同学就是把student点性别啊,给它改成什么呢?改成这个未知行吧,哎,不是未置是未知,嗯,也不知道是男的是女的是吧?这么写对不对呀,这么写不对呀,这么写会报错呀。
05:33
报什么错误呀,哎,那我们看一下吧,各位回到这儿我点了啊走。哎,说老师这添加上添加没问题,主要是修改对吧?好走同学他说啥未知is not DeFine同学他把未知当变量了,你的未知是不是个字符串啊,写好单引号,OK,哎,你得这么玩空格区分一下啊,这会儿呢,你也可以空一下格啊,好了,那左边呢,咱就不空了,后边空一下吧,OK,现在看一下效果啊,来,首先你得有这个性别,然后你再改,你看页面是不是有反馈,这不就是一个响应式的吗?好了,我们再往下做一个,就是这个同学看好这个需求啊,叫做在列表首位添加一个朋友,也就是说应该用什么呢?On shift啊,起个名字叫做I的friend friend,好来把它复制。
06:23
划到这儿是吧,再来一个,那怎么写呀,是吧,肯定是得添加一个对吧?诶这块同学除了有这种写法,还有一个,还有一个来再给这补一个,还可以怎么写同学VM.dollar site对不对,后边的东西是不是不用变,那我问你需要VM吗?不需要是不是可以意呀啊有两种方式的啊来咱再测试一下这种方式啊刷新走能不能加进去,能能不能改呢?也能好了,回来咱们再写这添加朋友啊this点儿,你是不得拿到student,你是不是还得拿到他的front,是不是往前边加一个,是不是on shift,那加一个朋友吧,注意了,朋友是对象对吗?
07:06
朋友可不像爱好那么简单,对吧?爱好是啥呀?是不是都是字符串基本类型的呀?但是这个朋友可是对象,对不对?好了,那添加一个吧,得有名字,名字叫做Jack吧,好,得有年龄,年龄随便写,比如说70好了。那同学我想问的是啊,我操没操作数组操作了,那我操作的时候用没用那七个API里的一个,用了哪七个API啊,能够引起原数组发生变化的那七个API我是不是用了,你只要用了就能发现,好,那我们看一下啊,各位来添加一个朋友,在列表的首位,也就是说在这个Jerry的上方啊,一会儿会出现一个人好走,是不是加进去了,那么新的问题出现了,我想问问各位啊。你说如果我去修改Jerry和Tony的年龄啊,还有姓名,是不是又能做一个响应师啊,因为这些数据我问你是不是当年我就已经配置好在里边的,那我想问的是啊,这个东西我承认确实啊,你掉了这个on shift,你把这人加进去了,但是我问的是这个人是一个对象,这个对象里边的东西他有没有做响应式呢?
08:22
同学你仔细想,咱之前是没有仔细聊过这个小点的,我掉了on ship都掉了push,又发现了数组变了,但是我往数组里放的东西又是一个对象,那么这个对象里边的所有属性是不是想应式的呢?其实你可以通过控制台自己去验证对吧?各位来我写写VM.student你再拿到他的这个众多朋友拿到了吧,拿到之后各位你打开你新添加那朋友,那Jack,其实其实你就打开这儿,一旦你发现了这个东西,同学你就已经懂了,如果之前我讲的那几小节你真听懂了,同学你就看到了红色框,你就能大胆的告诉我,老师你后天加的Jack其实也是响应式的,为啥我看到了C和get对吧?诶说老师那真是响应式的吗?确实是啊,老师我想验证,诶,那我们就得点这按钮了是吧,读一读,修改第一个朋友的名字为张三来吧,咱去改改各位,那还得写一个。
09:22
点击事件,呃,回调的名字,想一个叫做update啊,第一个first啊,朋友friend对吧,名字name update first friend name对不对?哎,虽然有点长啊,来把它复制过来走,同学不要觉得这个长,我跟你讲啊,如果要是在你那个真正的工作场景下啊,同学那方法名老长老长的多了去了,是吧?我见过最长的方法名就是说你这目录啊,稍微开的宽一点,这方法名一行没展示完,就是在某些特殊业务场景下,不是说你出去说老师公司代码就都变态呗,都那么写呗,也不是啊,好了,来,咱接着往下说,同学来吧,更新第一个人的名字,我得怎么办?
10:06
你是得拿到第一个人呢,从众多朋友当中找谁找谁啊,找第一个朋友索引值为零的,我写到这儿,可能有些同学就要拦我了,老师,不对呀,你错了,老师,你看你拿了数组的索引值,你输了,哎,同学啊啊,不要这么妄下结论,对不对?哎,年轻人,你讲点武德什么意思呢?各位不是说我拿到了数组里边的索引,我碰索引就废了,不是那意思,各位,我告诉你,如果你接下来这么写,等于123,那我得这么说,你这行代码咋的确实把数据改了,但是我又咋的不承认,为啥?同学,你看看你等号左边什么什么什么什么数组索引值,然后你再看这是不是开始赋值呢?你这种写法就是直接找到数组里的某个元素进行赋值修改。同学,咱聊过这种方式咋的,又是不是不认?但是问题是我写到这儿还得接着写呀,我找到这人了。
11:06
了,我还得这人点儿啥玩意儿,Name把它变成啥,咱刚才说的什么呀,张三,哎,说老师这么的就行,哎对老师为啥行啊。同学,你说为啥行,太简单了,你说你噼里啪啦的是不是找到了一个人,我就问你绿色框这一堆是个啥?是个对象吧,那我再问你这在干嘛呀,是不是在修改对象点属性啊同学,我就问你这个name有没有为他服务的和get。必须有,所以说你看一下各位VM啊,点儿找到那个student,找到他那个众多的朋友来,你打开看啊各位,咱就说这人他有没有名字,有我问你有没有为名字服务的盖特。有说老师那之前你说的是哪个了?说他没有get塞说的是谁?同学,我说的是数组里的第零项,这个东西没有零的和get,但是零本身是一个对象,对象里面只要有属性就有get OK,哎,你一定要知道我说的是什么啊,好了回来,所以说同学你就说这个修改奏不奏效,必须奏效啊,对吧,一改name name的塞肯定调用啊,好了回来我们看一下啊各位,那其实你添不添加都行,对吧,我现在要改,改的就是Jerry,那你要是添加一个呢,各位Jack,这是新添加的吧,好了你看着啊,我要改他的名字了,来走。
12:28
张三说老师年年龄你没改呀,对吧?老师那年龄我也想改,那就改对吧,咋写A老师让张三那个年龄小一点啊,让他是五岁,好写完了来看效果啊,首先呢,哎,添加一个JACK70,然后呢去改他的名字对吧?改名的同时你知我知那年龄是不是也改走,你看俩是不是都改了。对不OK,这不就可以了吗?是吧?好,所以说同学你得你得看明白最终落在哪儿了对不对?好,把这个呢删掉,我们只改名好,还有俩按钮咱们看啊,添加一个爱好,这就太简单了,各位啊,来走,那咋写,反正就想添加一个爱好嘛,那就是爱的好呗,好,把它复制,然后往这儿写走哎,当然别忘了这个小逗号,那咋写,找到众多的爱好是吧?this.student点然后好呗,是不是添加一个呀,也没说往前还是往后,这你就随便吧,来,再来一个叫做学习行吧,往里添加来瞧一下效果啊,现在呢,是抽烟喝酒烫头,再来一个走是不是学习?哎,都是响应式的。好了,剩下最后一个功能了,修改第一个爱好为开车,也就是抽烟不行了是吧,不好伤身体啊,那就开车吧,是。
13:51
我说的是正常开车啊,好的,回来走,同学那找到这个按钮是吧?艾福click啊,那这开车是DR对吧?Drive就开车呗,啊哎,是这样啊,这个名字叫drive,但是这会儿呢得换叫做呃,Up updateby对吧?更新一个爱好好写在这儿继续往下走,请问里边怎么写?
14:18
怎么写,是不是都找到那一堆爱好,好同学要咋的,是不是把那个开头的抽烟变成开车呀?好,那你咋写呀?哎呀,老师简单,我会了呀,找到里边的第一个,然后给它改成开车,这不就可以了吗?各位啊,不对呀,干嘛呢?看看这你干嘛呢?你是不是又通过数组的索引值直接去赋值了呀,这是不可以的,哎,说老师那这怎么办呀,简单呀,有两种办法呀,咱还说过呢点儿是不是lie啊,你要改谁是不改列表里的第一个把抽烟变成啥啊,说老师这个怎么回事呢?应该是我写错东西了吧,来看一下update ho呗,那这块呢,给他写一下update hoby啊ho by,刚才我把那个名字拼错了啊,这回回来这回就好了,好来,咱继续,同学这怎么写呀,Surprise,我要把开头的这个给改掉,不叫抽烟了,叫开车,那怎么办?同学是不是得写一个零就代表呢,要操作第一个,然后怎么办?写个一,就是从第零个开始删一个,删完之后再插入一个新的,叫开车是不就得了,好了,回来瞧一下效果啊,第一个是抽烟,诶那我修改走是不是开车,这是一种办法,还有一种。
15:37
把把它助掉同学,是不是这个呀,诶把它拿过来就可以了啊,然后把这个爱好呢,给它放在第一个,就是我要操作的是谁呀,那爱好爱好里的第几个呀,第零个变成什么呀,变成开车就可以了,来瞧一下效果啊刷新第一个是抽烟吧,好了,改是不是改完了,那除了有这种方式你也知道了,各位把这给它注掉,这会叫做this点,然后这会儿叫做Dollar for s对不对也可以,好了回来刷新一下啊走是不是也改了呀,OK同学,那我就把之前讲的这些API啊,就都用上了,对不对,还是得练一练的,那最终的最终各位你瞧好了,我们要来一个大总结了,这个大总结是写在十里的,十总结了56789,好,我把这个总结的东西呢写上,那把这空行呢?先给它删掉好在这儿开始总结view监视数据的原理,View会监视data中所有层次的数据,什么意思?
16:37
呢,来往下,咱之前聊过吗?也就是这里的student能不能监测能student name能不能监测也能,对吧?各位好,来再往下读,如何监测对象中的数据呢?通过实现监视,而且需要怎么的?你在new的时候就传入要监测的数据,说白了吧,你new view的时候,那data里面到底写啥?你想好了对吧?你后补的东西那就没有响应式了,但是如果说你真想让给你后添加的属性做响应式,是不是可以借助这两个API呀?嗯,好,那再看这如何监测数组中的数据呢?通过包裹数组更新元素的方法来实现,本质就是做了两件事儿。
17:19
啊,第一件事调用原生的那个什么push啊,On shift啊那些玩意儿啊,那第二件事呢,就是重新解析模板,进而更新页面,再读第四个在view中修改数组中某个元素,一定要用如下方法,嗯,首先推荐的是这七个,对吧,也可以借助谁呢这个,但是呢,大家可能还会有一个小小的疑问啊,说老师啊,现在有这么一个问题啊,就是。你说你一直推荐我说哎呀,要么用这七个去操作数组,要么呢,就借助红色框这两个去操作,说老师,但是你之前提过这个事儿就。老师filter不是过滤吗?老师你看啊,这filter呢,是没有出现在这七个当中的,这七个我知道可以对数据啊进行增删改查,就是数组里边任何一个元素增删改查这七个都能做,但是现在老师我要过滤,那你过滤这个东西它不影响元数组,那V还监测不到,你说那咋办呢。
18:15
同学,其实啊,很简单,你就把filter过滤完的那个东西啊,怎么着你再重新给它放回去不就得了吗?你比如说我给你举个例子啊,各位咱们再来一个按钮,再来一个叫做过滤掉爱好中的抽烟。过滤掉爱好中的什么呢?抽烟,哎,那这怎么写呢?啊,Re remove,移除,移除什么呢?S Mo,对吧,Smoke,啊,来吧,开始。写一个回调,嗯,你说这咋办?你肯定还得拿到那一堆爱好,你说对吧,各位,然后怎么办?Filter嘛,就过滤嘛,好给一个回调同学,这我就不说了啊,所有不是由view所控制的这些回调,是不是尽可能的写成箭头函数,咱之前聊过这问题是不是?哎,好了,各位,那你说这拿到的每一个是不是可以用H代替啊,那你说这怎么办呀?瑞过滤的条件是啥呀,我要什么吧?
19:17
啊,H不等于啥是不是抽烟的,那我问各位,你这么写到这行吗?不行,因为filter不引起原数组的改变,对吧呢,也没有包裹这个filter,你说对不?人家裹的是那七个能动原数组的老师,那这我咋办呀?哎呀,简单,各位你就把这个东西重新再给它放一份是不就得了?各位我问一下,就这段代码,我是不是没有通过数组的下标去进行赋值,哥们儿,我这很暴力的,我不是通过下标副值,我是直接把这数组咋的就替换掉了,OK啊,我用这个粉色框生成的新的数组,干掉抽烟的数组,把原来的爱好给剃掉了,这不就可以了吗?来我们看看啊,各位来,有抽烟喝酒烫头来走一下同学,抽烟是不是没了?你当然可以做的更好一点,各位,就是你过滤的时候呀,你传一个参数对吧,你说一下你到底要把谁过滤掉,然后那边接个参数对不?哎,这些东西都简单,咱就不再演示了。
20:17
啊,其实这个东西啊,同学,在V的那个官网里边啊,你也能找到答案,咱看一眼啊,教程完你找到那个列表完,这有一个数组更新检测,同学你看这儿替换数组,你看变更方法,顾名思义会变更调用了这些方法的什么原始数组,说白了影响原数据,相比之下也有非变更方法,例如filter contact slis,他们不会变更原数组,总是返回一个新数组,哎哟,那咋办呀?当使用非变更方法时,可以使用新的数组,是不是替换旧的数组啊,不就是刚才我的那个操作吗?对吗?各位好,来,往上往上,咱们再往下读一下啊,特别注意就是view点和VM点,不能给VM或者VM的跟数据对象添加属性,什么意思呀?这个说的很直接,说这俩API啊,不能应用在VM身上,那这个的意思是这个大哥呢,他也不能应用在V点下划线data上。
21:17
我之前给大家演示过,你往VM身上加,你往VM点下划线data身上加,是不是都不行?OK同学,关于如何监测数据的,我们就给大家呢,说完了,然后有一个最后的小点啊给大家补一下,我们之前说过一个词,各位是不是叫做数据劫持,劫持,诶劫劫持,那到底什么是数据劫持啊,哎,那跟大家说一下啊,其实所谓的数据劫持啊,就是这一步来打开,同学我打开这个VM啊,直接一点吧,VM点下划线date同学,你看这里面是不是有一个student,正常来说,同学我所写那data什么样,来看一下代码我所写的data什么样。
22:03
Data是不是一个正常的对象,里边是不是有student呀,但是你偏要把红色的data给我改成蓝色的样子,诶在这儿呢,给我改成蓝色的样子,那这种动作就叫做数据劫持,啥意思呢?各位,如果你不变,那你的data呀,那就这模样呗,以后呢,人家改了任何的属性,你是不是也不知道,但是如果你把你传入的这个data,把里边的每一个属性都遍利了一遍,都给它变成了什么形式呢?Geter c的形式,我们管这种变化,这种行为,这种操作就叫做数据劫持,为啥说叫劫持啊,同学,其实劫持有这么一种感觉,你比如说啊,你从你家出去,你想去超市呢,买瓶可乐,然后我说我在中间啊,我在半路劫持你了,你说啥意思,就不让你去呗,是吧,这是人类社会中的劫持,那代码里的劫持是什么意思呀?就是如果有人修改了student,那马上就被劫持。
23:04
知道了,有没有这点感觉,哎,有没有这么一个感觉,你比如说有人改了student,那塞马上出面来,你站住你干嘛去啊,你要改成什么值你给我来,你要改成什么,你看是不是劫持住了,劫持住之后他干嘛了呀,各位劫持住之后呢,他做了两件事,一确实收到了你的数据,给你正常改数据,那第二件事儿干嘛呀,它会重新解析模板的,知道了吧,各位,所以说这会儿呢,就是一个词儿的问题,数据劫持,哎,同学,那我们说一下呗,你说数据劫持也好,数据代理也好,他都离不开谁。他都离不开那个object点儿DeFine property,你说对不对,各位什么劫持啊,什么代理啊,都是用那API做的,嗯,好了,同学呢,这一小节呢,我们就听一下。
我来说两句