00:00
好嘞,各位,在我们知道了什么是数据代理之后啊,咱们一起看看view里面是如何应用这个数据代理的,嗯,打开三,我做一个简单的效果啊各位页面上呢,展示咱们学校的名字和地址啊,写一个HR学校名称内我还得需要一个地址,好,这也得改一下,你不用写太多啊,两个就够了,创建比如实例保存名字,这个地址呢,我就写真实的地址了啊鸿福科技园为了便于一会观察这个数据代理啊,那我把这个view实例呢握在手里,用VM去接一下,右键打开看一下效果。控制台打开刷新页面显示没问题,控制台也没有错误对吧?好,接下来呢,我放大一点啊,我给大家呢,输出一下VM,我们之前啊就知道VM的身上啊会出现address和name这两个属性,那是因为啊我在date里面写了这两个对吧,咱之前铺垫过date里面写的这一组一组的KY6啊都会出现到这儿,那经过我们刚才的复习啊,你看到了这个东西。
01:13
鼠标放在这儿了,你发现它有个提示prop,那你就明白是怎么回事了。也就是说呀,VM身上有的这两个属性啊,一个是address,一个是name,他们都得是靠DeFine property加上去的,也就是说当有人访问VM身上的内幕的时候,谁开始工作呢?Get工作,把一个别的地方的内幕给他拿过来,诶,用。那如果说有人通过VM去修改这个name呢,那你知道塞就要工作,然后去把一个地方的name呀,就给它改掉,那同学我说的那个地方是哪儿呢?哎,其实就是data,你说对吧?哎呀,说的再直白点,各位你这一点能出现上硅谷,也没有别的地方配置上硅谷了呀,是不是就data里的这个name呀,说老师呢,按照你这么说呀,这个address得有一个自己的C和get,那这个name也得有自己的和get,嗯,确实有往下滑,你就看到了同学这一组set get是不是为那个address服务的,那你说这一组呢?
02:15
就是为内幕服务的呗,是吧?哎,所以说这些东西你看我们都见到了啊,说老师呢,这不就是代理吗?可不吗?同学,我通过VM读name,读的是data中的name,我通过VM改name呢,那改的肯定也是data中的name呗,同学,这不是代理,这是什么是吧?说老师那这就说完了,就聊完了呀,哎,同学别急,我们去验证两条线啊,首先说说这个name啊,咱就拿一个说事就得了,你不用说再考虑这个address,你把name整明白了,Address是同理例,好同学咱说说啊,如果有人读取这个name的时候,那怎么办好了,Get工作。就把谁里的name给过去呢里的,然后咱再说另外一条线,就是如果有人通过VM去改这个name,那怎么办呀?好,这个name所对应的。
03:08
就要执行,然后就把哪个里的内幕给改掉呢?Date里的内幕给改掉,我们接下来要做的事,同学们就是验证这个蓝色和红色的这两条线,如果验证通过了,OK,数据代理咱们就说完了,好吧,我把这个呢先存一份啊,存到桌面上。好,然后呢,我把这个图呢,进行一个简单的剪切,嗯,打开。然后呢,我切一下啊,不让它这么大。把这调一下。在这这块呢,也调一下啊,还得能看到全貌啊,来是这样好给他存一下。OK,先验证哪条线呢?先验证最简单的那条线,就是get这条红色的线,其实这条线特别的好验证,各位你说我想验证的就是我VM读出来的内幕,到底是不是这的内幕,这个非常好验证,你就这么验证就可以啊,你把它的内改成一,你从这读一下A读出来的是一,你再把它这改成二,这一读读出来是二,那是不是就说明问题了呀?好,来开始操练起来,回到这里面商硅谷对吧?
04:14
打开控制台刷新一波,同学,我访问vm.name走啥上硅谷我们自己心里明白啊各位,你是通过VM访问的name,那get是不是得工作,那get是不是把那个data的name给你了呀?那你看是上硅谷data里的name,嘿,还真是上硅谷调一下,上硅谷123保存回到这儿再来VM点内再走,是不是上硅谷123 OK同学,觉不觉得红色的这条get这条线是不是验证完了,哎,它真是从这取的呀,我这一变的,那这会就变的是吧?好了,这不墨叽,咱再说另外一条线谁呢?塞诶,这条线呀,我跟你讲各位可就稍微有点小麻烦啊,但是咱慢慢来啊,各位也不难啊,也不难,好了,关掉,接下来呢,我通过VM呀去改这个名字。
05:00
我还是把这名字呢,还原成最正常的上硅谷好了,开始啊,刷新vm.name我开始改了啊,等于咋写呢,叫做艾特硅谷学校的英文名没敲回车了啊各位,我敲回车才叫改321走。细心的同学发现了,老师页面变了呀,页面变了这事儿吧,一会儿再说,你把数据代理整个流程分析明白了,你就知道为啥页面变了啊好,各位,我问一下红色框的这句话我是不是执行完了啊?我执行这句话是干嘛修改内幕,根据我们刚才的分析,你通过VM去改name,其实你触发了VM身上name这个属性set方法的调用。那么塞就会收到你所要改的那个艾特硅谷,英文的那个学校名,随后塞就会把data里的这个name由中文的上硅谷是不是改成英文的艾特硅谷?现在我想让你验证的就是这事儿,这个date里的name到底改没改?不能说你分析他改了,他就改了呀,啊那怎么办呀。
06:04
可能有同学就会这么说,老师回头看一下代码呗,啊,在这儿呢,没改,哎呀,同学你这就有点开国际玩笑了,我这些代码只是说一上来这个内幕是上规谷以后他可能发生五花八门的变化,对吧?你可千万别这么告诉我啊,回到代码里,看见代码只是最开始的这个样子,好说,老师那简单,你不就想看看date里的name变没变吗?来,我给你写老师date点内,老师完了你敲回车,那不就看了吗?啊,敲回车。报错呀,为啥?他说data is not DeFined,为什么呀?各位呀,你瞧瞧你的代码,你所写的那个data呀,是不是人家红色的配置对象里的一个属性啊,它是一个全局随时都能用的变量吗?不是。是吧,那所以说你这直接写肯定是不可以的,诶现在陷入一个僵局,各位通过我们的分析啊,我们能够得出来应该是绿色的这个data里的内幕呀,发生了变化,但是现在很尴尬,你根本就拿不到这个绿色的data,请问怎么办?
07:07
嗯,想想你拿不到他呀。现在我要是通过某个办法能拿到这个绿色的data,完了我点他的name,发现他的name真变成了这艾特硅谷,OK同学,这条线是不是验证完了呀,那问题是你拿不到啊啊,那来我跟大家说一下啊,同学们,其实呢,你仔细的分析啊,你说我绿色的这个data呀,终归来说是不是交给VM去用了。你说存不存在这种情况啊,就是你在new这个view实例的时候呀,你辛辛苦苦写了一个data对象,然后呢,交给了这个VM,然后VM呀,说算了吧,我把它扔了。你说可能做这种事儿吗?绝对不可能,因为各位你想想这个VM如果不把这个data给他存下来,那你说以后你通过vm.name去拿这个name的时候,人家上哪取啊,说的再直白点,各位这get想工作。
08:03
那上哪儿取数据去啊,是不是没有数据源了呀?也就是说他不可能把个data丢掉的,VM1定会想一些办法把这个data对象存起来,以后有人读这个name的时候,他让get工作,哎,然后从那里边儿给它读取出来,那问题是VM把这个data存在哪了呀?哎,我先告诉你存在的自身VM身上的某一个属性,老师我能猜到,肯定也叫data,那你去看看吧,来在这写啊,VM点回车没有各位啊,你听我说一下啊,人家呢,确实拿到了这个data,也的确存在了自身,但是并不是叫做data,而是叫做下划线data OK。我们去验证一下啊各位回到这儿呢,刷新一波,我输出VM,然后呢,打开你看啊有没有下划线有。说老师,但是你好像也并不能说明这个下划线data就是我当时传的那个呀。
09:01
哎,你这么说好像也是哈啊,说老师,那我看看里边的值吧,那于是乎呢,就想点开它,各位你听我说一句啊,目前你不要去展开这个下划线data,我告诉你为什么不希望你去展开,因为这个里面它做了一个数据劫持,而我们还没有分析这个数据劫持,所以说同学你不要打开这个下划线data,你打开之后吧,里边的东西会让你晕,我们还没有分析到这个数据劫持。好吧,我就先告诉大家同学们,VM身上的下划线data其实就是你所写的那个data,那我得让我每一个说法都落地,我得验证对吧?那问题是咋验证?老师这么验证,我教你VM点下划线date,你就看看它等不等于那个date不就得了吗?好一回车又报错了,各位,难道你忘了吗?那个date是不是没定义呀?哎呀,老师这咋办呀?哎,同学有一个小技巧,你瞧着我这样做,我呢,把这个data啊给它定义出去。
10:03
诶不直接写在这里边了,你写在那里边,你不是碰不到吗?我给它交出去,哎,然后这里边呢,我写对,那你说是不是处罚对象的简写形式是不是就这样了,哎,那我们分析一下吧,各位你传没传date给VM传了,那VM怎么做呀,VM做了一个非常简单的事,点二_data哎,就等于什么呢?你传过来的这个date。你传过来的这个date,那怎么表示呢?看着这么表示options date,那options是谁?各位你别忘了呀,你new view的时候传的可不是一个单独的data,可是一个配置对象哦,这个配置对象叫什么名?哎,我们可以称之为options配置嘛,选项嘛,然后点data是不是里边的这个东西?哎,那我再问你options.data的值来自于哪儿啊?是不是来于你外边定义的那个data?所以说同学这个里面是有三个连等的,你说对吗?VM点下划线date其实就是你传入的那个date,你传的那个date其实就是外边定义的那个变量date,所以说同学我验证一个事情就得了,我看看绿色的东西等不等于咱这边红色的东西是不是就可以了,哎,这回就能验证了。好了,回到这儿,VM点下划线date是否等于这个date,你瞧各位是吧。
11:23
哎,我兜了这么大的一个圈子,我只想跟你说明白一个事儿,VM身上的下划线data和你传递的那个data,它就是一个人,好,好了,回到代码中,那我没有必要把它定义出去,对不对,把这呢给它删掉,这儿呢,我就直接开始写好给他弄一下。说老师那下划线date里边能有这name吗?能有这address吗?当然有,来看着VM点下划线date点拿name有没有,哎,有,VM点下划线date拿谁呢?那个address有没有?哎,有,所以说啊各位以后啊,你说date中的数据啊,和你说下划线data中的数据,那都是一个意思,你说哪个都行啊,一般来说呢,我们选择这种方式刷新一下,重新验证一个事儿啊各位,首先我们看看VM点下划线data里面有没有内幕,有。
12:15
所以说我通过VM去取出这个name的时候,其实我取的是谁,Data中的内,那我要改一下了,各位瞧着VM点下划线data.name我把这名字呀,给它改成学校的英文名,艾特硅谷好小辉车。我问你啊同学,红色框的这句代码执行完了,我把啥给改了。我是不是把data中的数据给改了呀?问你页面咋还变了呢?那现在说说吧,页面咋还变了呢?同学,你忘没忘咱之前说过一个事儿啊,你打开这个初始view里面第六句话啊,第七句话哈,一旦data中的数据发生改变,那么页面中用到该数据的地方就会自动更新,你说对吗?哎,所以说各位,你刚才用红色框的代码修改了data中的数据,被维发现了,于是乎用到这个里边的名字的地方就自动更新了,你说对不?所以说这个时候你通过VM,你再去取那个name同学已经变成啥了,At硅谷是不好。
13:13
啊,那你别忘了呀,同学,我们要验证哪条线来着啊,是不是得验证那个塞哪条线呢?好,那我们就开始验证一下啊,刷新各位清掉塞是哪条线呢?来来来来来看一眼啊,打开这条红色的线,早就验证完了,接下来是这条蓝色的线,我通过VM去修改name,看看最终能不能影响data中的name对不对?好,回到我们的这个控制台开始啊,VM点谁内给它改成嗯,大写的艾特硅谷好小黑车各位啊,你说页面是不是变了,那你知道页面为什么变了呢?这是一个连锁反应,你通过vm.name去修改这个name,那肯定得调用谁CS里边它引起了谁的变化,Data的变化,那data只要一变化,同学view是不是就监测到了,那一监测到页面这个位置是不是就发生变化了呀,哎,各位,这就是view中的啥呢?数据代理,那我说了这么多呀,同。
14:13
学们都是靠我的语言,靠代码去给你描述,特别晦涩难懂,那所以说呢,我给你做了一个图,各位啊,来打开PPT做的啊,辅助你理解,同学,你听我说啊,所有的东西都会在这个图上体现出来啊,关于数据代理的啊,所有的东西不是说唯有所有的原理啊好了,我们放映一下这个PPT,一切都是因为你写了这段代码,你说对吗?各位啊,你创建了一个有实例对象,VM紧随其后啊,他就真给你弄出来一个VM实例对象,而且我为了表达是对象,你看我这给你写了是不是画括号,哎,这是不是结束,好,接下来呢,View就开始啊,为这个VM去准备一些东西,你看给你准备了Dollar符啊,At ts给你准备了Dollar福children同学,为什么用灰色呢?不是说这些东西不重要啊,是我们目前在分析这个数据代理的时候,不去关心这些东西,当然它还有很多很多的东西,我就用点点点去代替了,OK,好,那我再往下分析呢,它里边就有一个东西出现了,谁下划线data,那下划线data里面是什么数据啊,哎,你看这个黑色的代码这块啊走。
15:17
哎,完全来自于这个data,然后直接把data里的东西,哎就拿过来了,往这一放走数据来了吧,哎,所以说同学,截止到目前,你听我说有数据代理存在吗?没有,截止到目前view只做了一件事,就是收集数据。你写的data直接进行一次赋值就交给了下划线data对吗?所以说同学们啊,你觉不觉得其实view如果只把事情做到这一步也是可以的,你的代码啊也是能下去的,我问各位啊,就截止到目前VM身上,你回答我有没有内幕?没有VM身上有没有address?没有,但是你别慌,VM身上有谁下划线这个。
16:01
虽然没有这两个东西,但是我有下滑线data呀,我有了下划线data,我问你能不能访问到内幕,能不能访问到address,当然可以啊,所以说同学来回到我们的代码当中,如果we没有做数据代理,您这代码啊,就得这么写了,date.name。说老师你等等,你这咋能直接写呢?下划线data同学,你记不记得我们说过VM身上以及V原型对象上所有的属性和方法在模板里边是不是能直接用?诶,那你这块同理也得写一个date,点啥address是吧?老师,这能用吗?那你看看呗,打开一切正常,也没有任何报错,对不,但是同学如果代码真这么写,我问各位啊,咱是不是疯了呀?那你就写点啥都得下划线,Date_date你是不是太麻烦了呀?所以说回到我们的图里边view啊,又做了另外一个事儿,特别棒,他怎么做的呢?拿到你这个VM之后啊,同学,这俩VM目前是一样的啊,拿到这个VM之后啊,他开始往VM身上加东西。
17:02
加什么呢?瞧着首先加一个属性,叫做内幕。那内的值来自于哪儿呢?各位听我说,它通过get去读取到data里的内,诶,就是这一步。啊,朱老师那读那就通过get去读,那要改呢,只要有人改了VM身上的内幕,就通过映射到data里的内幕进行修改,哎,那同理谁也是这样的呢,Address你瞧呗。是吧,所以说我问各位,你觉不觉得这两条线才是数据代理,那你说数据代理干了一件什么事儿啊?把data中的数据放到VM身上一份,为什么要这样做同学,目的只有一个,就是为了让你编码更方便,如果不做数据代理同学,那其实啊,就是没有红色框里的这些东西,我们能不能写代码也能,那你得怎么办?下划线data.name多麻烦呀,那有了数据代理呢,它简单呀,对吧?有了数据代理回到代码当中,咱就这写了,这下划线data呀,就都没了,但是你知我知,虽然是没有写下划线data,虽然你直接写了内。
18:10
那其实它也是读取了谁这个data里的name,好了回到这,哎,那你说这两条线同学他都用了哪个API去绊到的呀,不就是object.DeFine property吗?哎,所以说同学这就是view里的什么呢?数据代理,OK,哎,大家理解理解好了,我们来一波总结啊,各位走到这。打开首先读view中的数据代理,读一读啊,通过VM对象来代理data对象中属性的操作,你想想刚才那个内幕对不对?VM能不能读name能,VM能不能改name能,那最终其实读的是谁改的是谁呀,Data里的name好再读第二句view中数据代理的好处,更加方便的操作data中的数据,没有数据代理操作起来有点麻烦。哎,再说说这个基本原理,那肯定是得借助这个API,哎,把data对象中所有的属性是不是都填到VM上啊?再读第二句,为每一个填到VM上的属性怎么办?指定一个和c name有没有自己的get和C有address有没有自己的get和set有,好再读最后一句,在set和get中啊,去操作data中对应的属性,那所谓的操作就是有读有写呗。哎,所以说各位啊,希望大家呢,一定把这个图呢,自己下去再好好看看,对吧,我把这个图呢,完整的给大家呢,放映出来,然后各位呢,可以在视频当中呢,你去截一个图。
19:30
好了,这就是view当中的什么呢?数据代理,但是这里面啊,有一个细节上的问题我想跟各位聊一下啊,哪个问题呢?瞧着就是关于VM中的这个下划线data,刚才各位我是不是说了一句,我说你别在这儿直接打开。哎,老师啊,我看到了下划线data,哎呀老师啊,我想打开你看着啊,我给你打开一下,各位你瞧着走。哎呀。同学,你又看到了熟悉的东西对吗?来,我再给你来一遍啊,走VM下划线内的是走朱老师我的妈呀,这没头了呀,这套娃了呀,老师这里边也有数据代理是吧?诶各位啊,你听我说,这里边儿它不是数据代理,这里边的东西它是做了一个数据劫持。
20:18
要不咋说刚才我不让你打开它呢,同学我问你啊,你要是打开这个下划线date,你期待的里边是一个什么样子,我说说我期待的这个下划线date打开是什么样子啊,我期待的那个下划线date打开啊,就是这个样子,就是内上硅谷,就是address宏福科技园。是不同学,刚才咱不是这么说的吗?VM点下划线data,它是不是拿到了,你这边传入的data是不是就直接赋值给他了呀?所以说同学这是一个负值的动作,那你觉不觉得既然是个负值的动作,他俩就得是一样的呀?但是你发现这里面诶,他做了一点小小的修改,说老师那这我就不理解了,为啥要这样修改呢?各位啊,咱这说吧,这个东西它之所以把你的下划线data给你改了,是因为它要实现一个响应式,就说白了吧,各位为啥你一改内页面上就有变化呀。
21:09
那是谁办的呀?来,咱捋一遍,各位,既然咱聊到这儿了,就简单跟大家说说,为什么他把里边的东西又变成这个样子了啊,来各位,咱就拿这说话啊。放映一遍走是吧,有VM了,诶下划线date,哎,拿到数据了,对不好,然后呢,走着走着走着往里边填name啊,来自于data里的name,填address来于data里的address,好注意听我说你通过VM去修改name的时候。最终引起的是不是data里的内幕发生变化?但是你千万别忘了一个最重要的动作,也是view当年给你的承诺,View说只要你敢修改这个data里的name,那么我就会让页面里边用到name的地方怎么办?自动更新。所以说同学,你觉不觉得想实现绿色这条线,那就必须得实现一个功能,就是让view能够监测得到date中的name改变了。
22:10
如果V监测不到data中的name发生了改变,那么请问view如何去帮你更新界面呢?哎,那所以说同学他为了完成这个功能,他就必须把data里的东西啊进行一番小小的修改,然后就能实现这个响应式了,哎,你这一变,页面发现就也跟着变,是这意思吧?各位啊,大家想想,我知道同学咱们最期待的是那个下划线date是不是就长这模样?但是呢,你看事实嘛,你回到这儿,你输出这个VM点二_data塔,那你看一下吧,它不是你期待的那个样子是吧,里边又变成这样子了啊好啊,这呢,咱就先不过多的聊啊,各位就现在你认为什么呢?同学,这个VM身上的这个下划线date吧,我问你有没有name有有没有address,有那就够用了,那这个下划线data就是谁?下划线data就是你的这个data,只不过它把里边的东西进行了一番小小的升级,升级之后呢,能够完成一个响应式的操作就可以了,我们后边在源码分析的时候呢,会仔细的分析这里边这个什么呢?数据劫持好,那这一小节呢,我们停一下。
我来说两句