00:00
好嘞,各位,那在这一小节呢,咱们就来正式的聊聊,比如监测数据改变的原理,哎,或者说是数据变化的原理,那都一个意思,好,我们先打开这个五在五里边儿啊,38行,我给你留了一个问题。就是如果你这样去修改马冬梅的信息呢,Vu是监测不到的,然后就有同学说了,老师我明白,那你肯定接下来啊,要给我讲啊,View是如何监测这个东西改变的啊,为什么38行不好用啊,确实应该是这样,但是如果你想把38行说明白,各位你就必须得知道view是如何监测数组里面元素的改变的。但是我们要讲的话吧,各位最好呢,先给大家讲讲又是如何监测对象里数据改变的,随后呢再引出来它是怎么监测数组的,随后呢就把这个问题给解答了,所以说这个问题呢,会说哎,但不是现在,好吧,来给这关掉,回到六里面,我们先研究研究view是如何监测对象里面属性的改变的,我呢先在页面上啊展示学校的名字和地址啊,学校名称内幕,那再来一个是学校的地址,这块呢也改一下好了,那我得创建比如实例吧,内幕上硅谷地址我就简单写了北京,我把这VM呢给他收到好了。
01:30
来,右键打开。控制台也打开。同学,我问你VM身上有啥?有没有内幕?有,有没有address,有这叫啥呀?各位数据代理这块没忘吧,也就是说我传入的这个data配置项里边所有的每一组KY6最终的最终谁身上也一定有,VM身上也一定有。那流程是怎样的呢?快速的回顾一下来,我给你截了个图,在这儿呢,打开。
02:02
同学看啊。VM身上有的这个name和address,其实都是来自于哪儿?下划线对上。对吧?那下划线data里的数据又来自于哪儿呢?各位,你是不是就得看橙色的这条线了,来自于哪儿?你所传入的data配置项,而且我们之前呢,还跟大家说过这个事儿,我说同学啊,其实它里边啊,写了类似于这么一种代码,等于data,你不是传了一个data吗?哎,那他就拿过来直接就放在VM的下划线data身上就得了,是吧?咱之前也是这么说的,对不?各位?但是我告诉你,他执行这个东西的时候已经是第二步了。他第一步啊,我告诉你他还做了一件事,什么事呢?就是加工一下你所传入的这个data,老师没懂,什么叫加工呢?就比如说你写的data是黄色框这个样子,然后呢,他进行了一番小小的加工,改变了这里边的一些小东西,随后再执行的这个。
03:04
老师,你怎么能证明这件事儿呢?很简单,各位,如果它只执行了第二步,那我问各位啊,这个下划线date和我传入的那个date,它得一模一样才对,你觉得呢,各位,就是它没有第一步,它没有加工这个过程,那说白了就是你这什么样,我这就什么样呗。说老师,那你这个图里边的体现不就这么回事吗?你这不是name上硅谷,Address鸿福科技园,你这这不也是吗?各位,我们在画这个图的时候是不关注这里边的事儿的,而且同学我在跟你讲数据代理的时候,我一再强调,我说你不要打开这个下划线data对不对,因为我说了那里边有数据劫持是不是?哎,我说咱还看不了对不对?哎,那接下来呢,咱就得研究研究了,这个下划线data它到底是什么样的呀?啊,也能正好验证这个问题,就是它确实加工了这个data,来吧,开始回到浏览器里。清掉这同学,我给你输出一个人VM点下划线得点。
04:02
诶,它是不是长这样放大一点啊,红色框圈起来,红色框是谁呀?下划线data好了,在这写上啊,下划线data,哎,这下划线呢,有点靠的太近了,写在这儿,下划线data。然后在左边呢,我再给你来一个蓝色的框,它是谁呢?它是data是一个对象,对吧,里边有什么呀,内幕值呢,上硅谷哎,我就用叉叉叉去代替了,还有什么呢?地址地址什么呀,北京好,各位,你说如果他所谓的收集数据啊,就收集你的data配置项,只是一个简简单单的复制语句,那我就问各位,蓝色框跟红色框理论上应该一模一样,你说对不?但是你现在观察事实是他俩一样吗?差点意思,同学,你看啊,你所写的data配置像是直接给内幕叉叉叉上硅谷,但是你看到人家这儿他把你的内幕变成什么了,还说老师他把我内幕搞丢了,哎,你可不能这么不负责任啊,同学,人家没有把你的内幕搞丢,你的内幕还在,但是只不过你内幕的值。
05:11
不再给的那么直接了,得靠谁?Get去给啊说老师好像是这意思,那你说当我要修改这个内幕的时候怎么办?诶得调这那你觉没觉得,其实所谓的加工各位就是把你data里面所写的每一组KY6都形成了get的写法,你说对吗?哎,那我们再画一个完整的这个图,你所传入的data呀,他拿到了之后呢,他做了第一件事儿来叫做什么呢?加工。哎,加工谁加工data加工完了之后再做第几步,再做第二步,第二步里边写了什么呢?大概是这段代码对吧,因为咱没分析底层源码嘛,同学,底层源码和我们的这个名字什么的还有一些区别,对吧?哎,在这儿呢,我们就不过多聊,诶是这意思,好,Data这是第二步,第二步执行完了,事情就是这个样子的。
06:06
那同学咱就得琢磨琢磨,他为啥非得加工一下啊,加工一下能咋的呀?各位你听我说,加工一下就能做响应式了,啥叫响应式?数据变了,页面也跟着变,这就叫响应式。OK,同学,你想想啊,当有一天你去修改了下划线date里的内幕的时候,你说就会引起谁的调用。是不是引起name所对应的调用啊,来,我给你画一条线啊,我换一个颜色吧,换一个橙色,来各位你改了name就会引起的调用,那你知道这里边它干嘛了吗?各位我告诉你啊,这个里面它写了一个调用,这个调用就能重新解析模板,诶就这一堆东西重新解析。那你觉没觉得同学只要你给匹配了一个,那么只要name发生变化我就知道。
07:03
那说老师你咋知道呢?内幕一改塞就掉啊,一掉就重新解析模板呀,模板一重新解析那怎么办?生成新的虚拟盗呀,然后怎么办呀,新旧盗墓对比呀,然后怎么办呀,更新页面呢?对吧?各位一整套流程是不是通了,而且同学你看看人家把这个塞的名字起得多棒,哎,你看看人家叫什么?React。诶,可能有同学想到,诶老师react,我告诉各位,这reactive这个词就是响应式的意思,你看响应式的这个sector对吧,你只要一改我的塞就调用,而且我这set是一个响应式的set,所谓的响应式的塞就说白了,这set方法里边它掉了一个方法,能够引起模板的重新解析,引起后续动作是不?也就是说同学人家加工这一下子不要紧,是不是就能实现对对象里边属性的监视啊?OK,然后这个时候呢,可能就有同学说了,老师啊,我觉得他做的太麻烦了,老师我不用把蓝色的对象加工成红色的,我也能实现数据监视,之前在线下讲的时候,每次讲到这儿都有同学想挑战一下,还说老师我我就觉得我不用去做这个第一步,这加工这家伙真累呀,里边有100个属性,我也得匹配100个get,老师我就不用这样我也能实现数据监视,是吗?
08:21
那来我们试试,好回到代码里,同学新建一个七叫什么呢?叫模拟一个数据监测,好你怎么想的你就怎么写来吧,一样的套路啊,各位这里边我不引入啊,引入view,它本身就有那个数据,那个监测了,咱还自己写啥呀,对吧?你比如说我给你准备一个data,各位咱都不写那么复杂,里边有个AA的值,是一来同学我现在的要求可简单了呢,就是data中的A只要一改,你在控制台就给我来一句话说A被改了。一个吧,它没啥意思,我再来一个,那这样吧,各位,我就把这data呀写的跟这边的一模一样,这不就得了吗?来拿过来各位OK好了。
09:09
来,你看看你咋写吧。说老师好像默认就行吧,各位默认行啥呀,我data.name啊name啊,我给它改成什么呢?艾硅谷同学来我问一下控制台会有任何输出吗?啊,会有人告诉我,我把内幕改了吗?比如说data.address啊改成什么呢?改成那个昌平改了就是改了,没有人告诉我a address被改了怎么怎么地,对吧?各位说老师啊,那我可以写呀,我不用什么get,我用定时器呀,行,那你写吧,啊set interval,然后呢,老师我每隔100毫秒我就怎么怎么地啊那来接着写,说老师如果诶这个data.name咋的,它不等于啥呀,诶上硅谷好写在这儿走,哎,老师我就能判断了呀,然后在这canolo,我就说name背啊改了诶那你试试吧,各位来右键打开控制台切过来,我没改呢吧,那你改呗,data.name来改一下,叫做艾硅谷,我改了吧,看效果走。
10:19
啥情况啊,是知都被改了,不用告诉我这么多次吧,所以说同学你只写到这是不行的,对不对,说老师那我怎么办?如果你真想硬写下去,其实也行,各位你在外边来个中转变量,比如说叫做tmp,然后让他的初始值呢,你也写,哎这上硅谷是吧,写在这,那你这怎么判断,如果data点内它不等于谁这个临时的中转变量tmp。啊,然后怎么办呀,那就说呗,内幕被改了,但是你别忘了再来一个动作,就是把它重新变成谁这个data.name你说对不?就拿中间这个人做一个什么呢?做一个中转,同学,我说的是啥?我说的是硬写啊,我的意思是我就不想get我能不能写下去,其实硬写能来,写完了各位看着data点,比如说改成123,各位是不是告诉我改了,那同理,你再写个定时器你干嘛去,是不是整这address,但是我问各位,你说人家能这写吗?
11:13
同学你这么开定时器啊,那就开死了,不可能是这样写的,所以说同学它监测name和a address的改变,就是靠啥呢,靠那个get和。然后呢,就有同学说了,老师我明白了,你看一下你刚才那图是吧,我也能写,老师不是在这儿了吗?来打开老师就是把name address直接给的这种属性全给它匹配上这个address name,然后带有get,这个老师我也能写,行,你去写写啊,来给这关掉回来老师那容简单的嗯,Object点儿they property,嗯,老师,我往那个data身上加东西,加个啥呢?老师,我加个name,对不好了,老师,我再写那个get和嗯,老师,如果有人读取那个name很简单呀,我return呢,Return data点谁呀,Name是吧?哎,老师写完这个了,那我再写一个塞啊,好塞,会收到你改的值。
12:09
里边怎么办呀?老师,如果有人改这个data.name那我就把这个里边的name给他改了,那不就得了吗?嗯,好了,你试试看看能不能行啊,有反应快的同学肯定会反应出来了,说老师这么写它有问题呀,哎,那你试试呗,啊那这样同学这a address呢,我先给他注掉,省得他干扰咱们啊,我先给他注掉,好,你回到这,你去看效果啊,同学,我输出data,你看你这个data是什么样的啊,打开老师你看我成了,我成功了,老师你还说什么呀,你看看我这个data。老师,你原来写的是name上硅谷,老师,你看我这事做的多棒,快夸我看data里边是吧,哎,有name,而且name我还不直接给呢,你看我还匹配了一个get,多棒啊老师,但是我告诉你同学表面上一点问题都没有,但是我告诉你啊,你废了你这个name,你是读也读不了,你是改也改不了。老师,我不信,那你就试试,各位来读一下啊,走。
13:03
报错报啥错误超出最大回调站大小对吧,就说白了内存溢出了。这是读出问题了,说老师为啥出问题,一会儿解释出没出问题出了,我告诉你改也不行,瞧着a.a改成123啊,当然我那不是A是吧,哎,是内幕好了,走,改也不行,为啥读是也不行,改是也不行,咋的了呀,这是哎同学说说吧,回来其实你观察一下你所写的这段代码啊,大家你看看,其实挺有意思的,你说如果有人读取内幕,你告诉我调谁?要。啊,就只要有人读取这个name,是不是得调这个get?好,我问你,Get里边你写了绿色的代码,绿色的代码在干嘛?哎呀,老师,我在读取data上的内幕呀,你不刚说完吗?有人读取data身上的内幕是不得掉get啊,那于是乎同学绿色代码一直行,你说咋的?是不是掉红色框?
14:02
红色框一执行,我问你是不是绿色代码再次执行,那你说是不是意味着他又得调这个get get1执行又访问了内幕,那内幕只要一访问同学,你觉不觉得周而复始停不下来了,啥意思?递归停不下来,死循环。同理,谁也是塞,你观察呗,如果有一天有人改了data身上的name,我问你谁调用红色的?调用红色的塞里边你写了这句话。干嘛呢?修改data的name data身上的name只要一改塞,重新调用C,一重新调用,你又去改data身上的name,它就又掉塞,同学,是不是周而复始停不下来?哎,所以说同学这个图里面,他把哪个呢,来这个图。他把蓝色框的对象变成红色框的对象,不是像你想的那么简单,对不对,这API夸一写就完事了,表面上行,实际上一读废了,一改废了,所以说他不是这么写的,那他怎么写的呀,各位来大概呢,给大家写一写啊,这个是什么呢?你所准备的这个data是吧?哎,你传入的那个data,然后接下来呢,你看着这个view底层啊,有这么一个东西啊,他写了一个构造函数,各位这就是它的技巧啊,啊叫做observer。
15:13
Observer什么意思呀?这词呢?其实你可以查一下,嗯,打开那个有道observer本身就有观察者,观察家,观测者的意思对不对?好,这就是OB observer构造函数,它能干嘛呀?能够创建一个监视的实例对象。那舒老师他能收到什么参数啊,他能收到一个对象作为参数啊,就大概写一写啊来接下来你看着啊,他想把你这个data里的数据啊,进行这个监测呀,他得靠observer,他拿到你所传入这个data之后呢,他马上就做了一件事,各位你看着,既然我都说了observer是构造函数,你是不是得用new去调用它啊,来一个observer好,然后把谁传进去呢?然后在这儿呢,它就会收到一个observer实例对象,我就用OBS去代替了它前三个首字母,对不好,各位写好这一步在干嘛?叫做创建一个监视的实例对象,用于监视data中属性的变化,他把逻辑都封装在这里了,说老师那他怎么写的呢?我们不可能短短的几分钟,十几分钟,20分钟能写出他那么完善的observer,我们把一些核心的东西给大家写一写。第一步你听我说,他拿到你这个对象之后呢,他做了一件事,叫做汇总对象中所有的属性,然后呢,形成一个数组,借助哪个API呢?就是object身上有一个kiss,然后呢,就拿到这个OJ。
16:50
肯定你得收到对吧?哎,Kiss好,然后他开始变历了,变历你的kiss是一个数组啊,那我先带着大家呢,去看一下这个kiss吧,好,来到这瞧一下name address是不是都在,好回来,然后呢,开始遍历kiss点什么呢?For each,好,你拿到的每一个是不是可以用K去作为一个行参呀?接下来同学它的技巧来了,就是在第23行它的技巧来了,他这么写的,object.DeFine property,他也很聪明,他不会直接去动这个东西的,你要是直接把它拿过来,同学人家身上有内幕,你给人家整1GET完,再读取人家身上的name,那不又是一个死循环吗?他这样做啊,Property,他往this身上填,那你就必须得知道这个this是谁,这this是谁。
17:40
这个this是它的实力对象,可不是这个data,你说对不好,往这个observer的实例对象身上添加一个属性,那属性是name还是address啊,我得读取K的值,对不好了,接下来他写什么了呢?Get它又写了一个什么呢?那get里边干嘛呀?各位,很简单。
18:03
Return,把谁交出去,就把传入的这个对象身上所对应的那个属性的值给他交出去,这不得写方括号吗?不得读这变量吗?那再说说这个塞里面干嘛呢?它会收到你所修改的这个值,然后把谁改掉呢?把传入的这个对象身上的K所对应的那个属性给它改掉,就是这么一个逻辑啊,咱不用写的那么多,OK,就写到这儿,差不多就够用了。然后我问各位,你说这OBS你告诉我他长什么样吧,看你基本功够不够了,各位,这是data对象对不对?然后交给了谁observer,然后呢,身上有什么?我问各位,那你说是不是就意味着这个observer的实力对象,OBS身上也有相同的属性?那有相同的属性,并且是用get写的,你说对不?所以说这个时候呢,我们输出一下这个OBS呢,大家看一下表面上好像没啥东西是吧?各位你展开来看有没有address有有没有name也有,对吧?而且是用get写的对不对?哎,OK,好了,回到我们的代码当中,说老师,那这能怎么的呢?各位你说如果此时此刻我在准备一个VM实例对象是吧?写好这干嘛啊,叫做准备一个VM实例对象,然后同学你说我是不是可以这么做了,VM点下划线date就等于个OBS是不?
19:32
那你看一下吧,各位,这回呢,我输出谁VM,你瞧一下身上有没有下划线data有有没有address name,有没有get address set address这些是不是都有啊,哎,舒老师,但是那个data它没变呀,还是这样啊,那你可以做的再完善一点啊,各位来个连等是不是就可以了呀,你辛辛苦苦弄出来,那OBS给谁data再给谁下划线data OK,不,各位,那你说我在这儿再来一个输出功能不就实现了吗?哎,写一个模板字符串吧,各位,哎,写上叫做Dollar符画括号,然后K咋的被改了,然后呢,他就得这么说了,我要去解析模板,然后呢,生成虚拟盗模,然后干嘛呀,进行什么比较啊,点点点吧,对吧,点点点,然后叫做我要开始忙了,对不好,那你看一下效果啊各位清掉VM点。
20:32
下划线data是不是这个样子,那我的data是不是也变成了这个样子,那我们之前验证过一条线VM点下划线data是否等于我传入的那个data呢?是一样的,而且最主要的是VM点,哎,下划线data点谁这个内幕一旦你给它改成了这个艾硅谷,各位瞧效果。是吧,内幕被改了,我要去解析模板了啊,我要开始忙了,对不?各位那维U其实就是在这一步没有做输出去触发什么了呢?重新解析模板,各位,所以说你看这才是我们真正咋的模拟了一个数据监测,当然了各位,人家view写的比我们咋的要完善的多,有两个地方就比我们完善,第一个地方我问各位,我想改内我得咋的,哎呀,我得VM点下划线date,我去改这个name,你说对不?我改成123。
21:22
但是我问你,如果在view里就不用这样V咋的就可以了,各位来到这view里边,你当然也可以这样VM点,然后呢,你不嫌麻烦,你就写呗,下划线date.name等于123同学页面是不是变,但是在view里边你有一个更好的办法,就是VM点是不是直接就内同学一句话,因为人家做了数据代理对不对,123改成456看是不可以,这是比我们完善的地方,还有一个地方各位比我们也要完善的太多了,就是哪儿呢?看着我们呀,是没有考虑这个对象里面还有对象。你仔细考虑考虑。同学你看我要是写到这种程度呢,你自己看一下,其实也还可以是吧,VM输出打开。
22:05
我有没有address和name,有,那我有有为他们服务的get和有当你改了a address,调谁set address,随后呢,更新页面去,那如果有一天你改了name,那谁调用呢set name,那随后怎么办呢?更新页面去,但是同学你没考虑一个问题啊,如果人家这个里边有A是个对象,里边有B是一,你就完了,以你这么写就完了,因为你看你只考虑了一层数据,对不?你只在这儿拿了这一下子。那你看看你现在这个效果是什么样的啊,各位回到这儿清空掉,你先输出VM点下划线,Date完了你去瞧啊各位打开。有没有address有有没有name,有有没有A,有有没有为他们服务的和get,有但是接下来啊,这个事情就有意思了,你打开A走,各位,那你看啊,这里边是不是明明有B,这个B是不是也是属于对象里的一个属性啊,是不应该为B匹配一个get和啊,但是以你这么写,各位咋的,他就没有,你只考虑了一层,说老师那view考虑了多少层呢?你有多少层view就考虑了多少层,因为它底层写了一个啥呢?递归一直往下找,一直往下找,直到找到什么程度呢?某一个东西不再是对象了,老师,那怎么验证呢?很简单,各位回来来到这个里面,我呢,除了保存学校信息,各位我还想保存点学生的信息,学生也有名字,那我就不能再写name了,那我得怎么办呢?是不是可以这么写student完里边咋的有名字,比如说这个名字呢,叫做Tom好,那人还有啥呢,年龄对吧?各位啊,那年龄呢,直。
23:44
这写吧,18岁,那你这回你看看啊,各位回到这个里边V的这个里边输出VM啊,我直接输出VM,点下划线data吧,省得太多了干扰你,你打开各位啊,你看有的这三个东西是不是都有他们的get,当你打开谁呢?这个student的时候,Student本身是不是又是一个对象啊,里边的name和age是不是也是对象里的属性啊,各位你看看人家咋的了,还给你匹配get sector,舒老师,那我要继续写下去呢,你比如说舒老师这个age啊,它也是一个对象。
24:16
说老师诶这是对象,那你咋写呢?来我这么想的各位人呢,一说年龄都有自己的真实年龄和对外年龄对不对?各位哎,你比如说说说自己这个真实年龄,那我就用这个叫做啊RHR是啥意思,Real真实的对不对啊,你的RH呢是18岁啊,那你的对外年龄呢,就是你说出去的年龄呢,叫age对吧,Speak你说出去的啊,说出去的是多少呢?这么的吧,真实年龄啊,你很大,你40完,你说出去呢,你永远29对吧?各位好,那你看一下student是对,那你看怎么做就了,V点下位瞧着啊,打开student。那既然里边有name和age,就得有他们的get和C去监视数据,那么当你打开H,发现又是一个对象,里边有rh age,那就还有它的get和是不?各位他会无限的找下去,直到呢,这东西不再是对象了,而且他还有个地方做的就更完善了,各位就哪怕你把东西呢,是放在了一个数组里面,他也能找到你,比如说啊举个例子,各位,嗯,我写到哪儿呢?我写到这儿吧,Student啊说有一个学生,他叫做Tom,他有年龄,那这个学生呢,还有一些这个朋友,对吧?有些朋友,那我在这写friends是不是朋友啊,然后是一个数组,那有很多朋友,先说第一个朋友,这朋友是不是又是一个对象对吧?各位啊,这朋友是是也得有名字呀,那朋友什么名字呢?比如说叫做Jerry,可以吧,那朋友也得有年龄吧,他这朋友就很诚实,该多少就多少啊,35好,OK,同学,那你看我这个对象是不是属于藏在了一个数组里面,你放心,View也能给你。
25:55
拎出来你看着啊,同学来到这儿,VM点下划线,Data走,你回车看啊,找到student,诶有这三个就有他们的set,再往下找,别的不找了,别的咱之前都找过了,看这个France同学是不是一个数组,那打开这个数组,你发现数组里面是不是第零个这个人是不是一个对象,那你打开它,你发现只要他敢有对象里的属性s get是不是再次出现,所以说同学们你发没发现view监测数据的原理就是靠谁,靠C,也就是说各位当你改名的时候,学校名啊,然后当你改学校地址,当你改谁这个学生的名,当你改学生的谁那个friends,因为同学friends是不是也是students里的一个属性啊,然后当你改谁,当你改这个年龄的时候,还有就是当你改他朋友的年龄的时候,他朋友名字的时候,同学就这么多的塞,里边他都做了一件事儿,只要你敢改数据,各位他就咋的会。
26:55
重新的去解析模板,生成虚拟盗墓,随后对比乱七八糟的一切都开始明白了吧?各位,这就是view监测对象改变的原理。好,这小节停。
我来说两句