00:00
好嘞,各位,那在这一小节呢,我们给大家讲一个VIEW3里面特别重要的API,它的名字叫to ref,这ref吧,我们学过了,哎,是专门用于定义一个响应式的数据的,哎,可以接收基本数据类型,也可以接收对象类型,那to ref是什么意思呢?直接翻译过来啊,它的含义就是把什么什么东西变成一个ref,我说完这话之后啊,可能有些同学觉得老师我不需要这个API,就比如说我想把一个数字十八变成re,我这么写呀,我想把一个字符串变成ref,我这么写呀,对不?哎,随后老师这18呀就是响应式的数据了,这ABC呀也是响应式的数据了,完了ref的返回值就是你之前给我讲的那个ref,然后呢,什么IMPL这东西不是这个实力对象吗?完了,不有什么点Y值什么,不就能响应式了吗?我不需要这东西啊,目前来看确实是这样的,但一会儿你就不这么觉得啊。
01:00
在这呢,各位我不想读这些作用和语法,咱直接代码上见,因为目前这个东西读起来很绕口,不好理解,你就比如说这个作用,来咱读一下,创建一个ref对象,使其Y6值指向另一个对象中的某个属性,为啥要这样做呀,这样做有意义吗?哎,所以说我们代码上见,来回到代码里,各位我精简一下刚才写的东西啊,这test不要了啊,然后这个hos呢,整个文件夹也不要,然后来到APP里边,那这块呢,就不再引入了,不再注册,也不再使用了,OK,干干净净的啊,来把这关掉,然后找到这个DEMO啊,把这DEMO里边所有的东西全都删掉,哎呀,说老师你这要干嘛呀?来,我把这个里边的DEMO的内容啊,给它复制过来,别紧张啊,我会带着你捋一遍的,咱都写啥了,来粘过来啊,然后呢,同学我删减一下啊,在这里面我只留下人的信息,姓名,年龄,薪资,哎,这三个HR是展示信息的,这三个button是修改信息的,对吗?各位。
02:00
Team age job是不好来往下,那这些东西呢,我就给它删掉了好,还有就是这个sum和这个message我也不需要了,这两行干掉,那这呢,删掉好来再往下,同学这个job我依然让它保持深层嵌套这种形式啊,来把这个给它删掉,还有这个effect也给它删掉,那这回啊,同学我就交出去一个东西就得了,什么呢?Person这段代码能不能看懂各位一点也不难,展示数据修改数据是不在这呢?配置数据呢?那这儿呢,交出去是不?各位哎,来回到这儿刷新一波张三1820K来看一下走哎,增长年龄涨薪是不是都可以用好回来。那么接下来同学我做一件事儿,我想让模板里的代码简单点。说老师现在不简单吗?现在不简单,现在很烦person.person.person.person点,哎呀,我的天呐,同学那怎么办?你得从哪着手?同学,你为啥在这儿能用person,你就告诉我为啥你能用,因为这交出去了,哎,咱最开始就说了嘛,咱说拉开序幕的setup,那个时候就给大家讲了,你这返回的对象里面有哪些key,那在这儿呢,他就能用是不是?哎,那在这呢?同学你可能会想到这样啊,来各位瞧着啊,你可能会想到这样,Name值呢,哎,person.name对吧?各位就是能想到这一点毛病都没有啊,我说能想到这没毛病,没说说这么写就没毛病啊,能想到这一点毛病没有对吧?就是我给数据的时候,我给的到位点,你别图那省信,你咔啦一个person给人家,那这肯定得麻烦嘛,是吧,取到位啊走走这块什么,诶写上叫做这个A,哎,那这呢A,那接下来呢,是不是想要这个salary薪水,那就慢慢写呗,Job点,哎,然后再写谁呢这个G1走是不说老师。
03:48
你这么写感觉也麻烦,你这不还点儿呢吗?那同学你这么说就不用写了,你这个数据的设计,只要是这种深层次的,我不管你在哪儿取,你终归得有一个地方,你得一点点取出来吧,你想模板里边不取,那你这就得取好,那你这想省心,各位,那你模板里就得操点心是不?各位哎,那所以说模板里边咋的?哎,这person点啊,都让他白白吧,是吧?各位啊,那而且这块也不用这么麻烦了是不啊,那这块呢,同样的这些东西也给它删掉,你看我读这个姓名年龄薪资,夸我就读嘛,那我改呢,夸我就改嘛,而且这你看很给力嘛,我交出去了,来能看看效果吧,刷新一波,诶,初次展示是不是没问题?嗯,接下来你看着啊。
04:33
改改名呀,增长年龄,哎哟,薪资呵,咋了,完了,功能废了,初次展示没啥毛病,这数据怎么丢了响应式呢?啊同学要想把这问题说明白,我就用一个最纯粹的GS给你写点东西啊,你就明白了。其实同学如果你要应快可在这儿啊,你可能能反应过来,但在这呢,同学站在所有同学的角度去考虑问题,接下来我写这么一东西啊,demo.hdml走,写点固定的结构,写个脚本,准备一个人啊,比如说这人呢,是person人呢,有名字,名字呢让他是张三好,再来一个年龄,年龄呢让他是18岁好,各位,大家还记不记得VIEW3里面实现对象类型响应是人家靠的是什么来着,可不是geter啊,Get是基本数据类型,人家这个对象类型靠的是那个prox对吧?各位好,接下来我模拟一下,在这light一个P,等于你有一个什么呢?内置的这个prox,然后说我要代理谁,我要代理对person的操作在。
05:33
在这走,你是不是得配置什么增删改啥啥的,同学在这我不写那么多时间关系啊,你写那么多也没用,就写一个能掩示明白问题就可以了,我在这儿只考虑这个set对应的动作,哎,也就是说你添加一个哎,或者是修改某一个属性对不对?同学,这能收到什么来着,第一个t target,然后第二个什么呢?Proper name,哎,就是你操作的是哪个属性啊,那这个呢,就是具体的Y流值了,那在这呢,同学,我来一个conso log走啊,用模板字符串写一个Dollar符画括号,然后走着proper name,然后怎么着叫做被修改了,然后呢,我要去更新界面了对不对?同学,这不是响应式的根基吗?啊,那在这呢,你得做一件事,就是找到这个target,把它所对应的真正的那个pop name里边的值啊,咋的给它改了,嗯,那当然咱想写的好一点,各位可以不这么写,是不是就是按照VIEW3那个源码里面人家真正的那个写法,借助这个反射对象reflect.site说你要改谁?诶,我要改target啊,那改它里的谁呢这个。
06:33
五性改成什么值呢?改成这个对吧?各位OK,写完了右键打开瞧效果刷新,看看这个person啊长什么样子,再看看这个P对吧?各位张三18,那么接下来你瞧好了,p.name等于我要改名了。例四同学name被修改了,我要去更新界面了,这体现出了什么响应式?也就是说各位我p.name去修改这个name的时候是不是响应式?就这家伙,Yes,是的啊,那p.age给它改成80岁走着,各位age被改了,那不说了,也就意味着p.age这种方式去改这个年龄,它依然是什么响应式的?哎,那接下来我做这么一个动作,你瞧好了,各位let一个name等于p.name啥意思呢?哎,我通过这个P取出来了name,那个张三交给这个name是不?各位好,那接下来你看着啊,P呀长这样,Person长这样,Name呢?是刚才你定义好的吗?张三吗?那接下来你瞧着啊,Name等于。
07:33
什么呢?李四看好了啊,走,改没改啊,改了说明白你把啥改了啊,你把啥改了来清掉,各位你看这批什么样你没改,Person什么样你没改?哥们,你改的是你自己玩的挺开心的那个name是不没发现刚才来各位P长这样,Person长这样,你没发现刚才你写内幕等于李四的时候没有输出那句话吗?哪句话呀,这句话呀,代表响应式的这句话呀,是不是没输出啊?哎,那同学那你说说为什么吧,为什么这么一折腾这内幕就不行了呢?嘿,因为同学这是你自己新定义的一个变量了啊P点内幕同学你22行代码,你听我说就相当于你在这儿写了一个张三完事了是不?各位啊,你还天真的觉得,哎呀,老师这个内幕一改,对应的就是P点内幕,各位这可没有引用关系啊,对不?各位P点内幕的。
08:33
都是个字符串,你把字符串赋值给这name了以后,你再改这name,同学会导致这里边的东西变化吗?不会,其实根在这儿呢,各位,来,我再给你写一个let,一个OBBJ等于,比如说里边有一个A是100啊,那同学你这么玩来let a等于OBj.a那回头我问一下你改A等于200的时候,咋的这也改啊,这改吗?这不改啊,是不就这么回事,各位,哎,所以说来把它删掉,那这回你就明白为啥说来找到咱这,你这不好用了,那同学我问你person.name你就告诉我是啥吧。
09:04
哎,就这person点,你说他是个什么玩意儿。是对象是数组同学,他就是个字符串,张三,不信你在这来个输出,各位你consolo前边我给你加几个百分号,就在这儿,哎,就在此时此刻,你输出这个person.name完你自己瞧去啊,回到这边刷新啥,张三同学,那你这么写啥意思?嘿,哥们儿,我跟你讲,你这么写就相当于啥?张三,你这么写相当于18,那你这么写呢,上面多少20吧?哎,这么写同学,你看你这么写是属于啥感觉,这person直接让你扔了。你就压根没看着说老师,但是我从这读的值啊,是你刚才在这像模像样的,你写了一个哎呀person.name但我问你同学这代码一执行,这一堆玩意儿,它就是个字符串,你这么写返回了一个普通的对象,同学那初次展示绝对是没毛病的,咱们最开始就测试过来,各位你还记得吗?我给你讲这个初始setup,我不说了,一个什么玩意儿,我这不在这说了一个暂时不考虑响应式啊,你看当年咱咋玩的,咱不就这玩的吗?啊,你往上看内幕不就张三18,所以他没有响应式吗?啊是不?哎,你得先整明白他为啥丢了响应式,你才能去学接下来的这个图ref是不?你本身就对这个问题你都没有理解,完了你就学这个问题的解决方案,那你就是在死记硬背对吧?各位啊,那现在这不行,这怎么办?这玩意儿得解决呀,这怎么解决呢?哎,来吧各位,我得给你请出来一人了,哎,请出这人之前,我把这代码调整一下,Cost name1等于person.name1,那么请你回答我,各位,我在这呢,Consolo这个name。
10:40
呀,他是什么样子呀?哎,在这儿加几个百分号啊,走什么样子呀,刚才都看见了呗,就是张三嘛,啊回来,那接下来隆重的请出一个人,这人叫什么名来,叫做to ref,先别用这个,诶一会儿我再给你讲这个to ref来走着这玩意有什么作用呢?嗯,瞧着啊,我这么写,我在这来一个内幕二,To ref是一个函数来开始了,重头戏来了啊,To ref的同学,它的功能啊,就是帮你把一个不是ref的东西,哎,变成是ref的东西,那接下来它是这么写的,首先第一个参数告诉人家你想操作哪个对象啊,你想把哪个对象里的这个属性名取出来用呢?诶,你告诉人家我要用这个person里的东西,然后呢,你再告诉人家说,你想要person这个对象里的哪一个属性啊,你说我想要这个name。
11:34
说老师那你这么写麻烦呀,我这person.name咱说了吗?你这person.name是取出来了,取的太直接了,直接就整出来一个张三字符串,那不行啊,那来说老师这回是什么样子呢?那看一下啊,没有对比就没有伤害,接下来呢,我再给你输出这个内幕二前边加几个井号,好了,瞧好了啊,各位回到这边刷新。往这边点长点,让他能放下同学,这是谁呀?内一是个什么玩意儿,字符串,干巴巴的字符串,张三啊,那我再问你,他是谁呀?就这一对,这是谁呀?这是NAME2 name2是啥呢?说老师我不认识,你不用看前边这块object,你就看后边这你认识的,你认识的。
12:17
这个东西是re Fi PL的实例对象,你都能告诉我这是啥同学来输出这玩意儿,我们管它叫啥来着,叫ref对象是不?各位之前就跟大家明确过这个概念来,同学打开发现里边有啥value value是啥张三,有张三对应的get对吗?各位,所以说各位来吧,兔ref就把你的这张三,诶,就变成了一个ref类型的张三,你读的时候你点六去读,你改的时候呢,你点value去改,而且我告诉你最给力的是什么呢?它在这拿到的张三就是你person里边的那个name,哎,我回头代码里给你画个图你就懂了啊各位来问你啊,这个东西你看到了它是个什么玩意儿,它是一个ref ipll对吧,里边有很多的属性,其中有一个最重要的,也是我们最关注的就是Y6啊,那在这呢,给它扩回来走着,那么当你去读取它的Y6的时候。
13:17
觉得特别给力的,悄悄的,诶来到这儿了,也就是说人家其实读的还是什么呢?person.name感觉一下啊各位哎,NAME2哎,是个ref对象,哎,你想读,那那你就点value读,哎,你一读其实他偷偷找的还是谁,嘿,person.name对不?各位哎,有一种什么感觉,桥接是不说老师那我这么写,同学你这么写就没有中间的环节,你这么写E一个字符串就出来了,是吧,一点想应式也没有,但人家就不是有一个中间人,并且这个中间人还不是一个一般人,谁呢?Ref对象他最大的特点就是能做响应式是不?各位哎,体会体会,而且还有优势,各位我问你啊,就这个内幕二,你在上方使用的时候,请问你需要点value流吗?你不需要,为啥?早就说过了,Ref类型的值在模板里使用是根本不需要点Y6的是不是,哎,体会体会内一和内。
14:17
二到底能咋的能咋的就在这儿体现了,他不是响应式,他是响应式,并且在这儿不是说给你复制了一份张三,人家很聪明的人在这儿通过点Y就找的还是这儿是吧,各位,嘿,就一种感觉,别自己点自己点完那玩意儿它不是响应式的,那所以说你告诉我同学你知道接下来应该怎么做了,那内蒙这别写张三,别写张三写啥to ref,哎,完了写什么呢?Person完了告诉人家我要这个name,那同理,那这些东西。走着走着,这怎么写A纸,那问题是这怎么写呢?Person点内幕啊,说老师我job吧,那这换成job不的,我不想把job交给模板,我把job交给模板,我不还得job.g1salary吗?不行,烦得慌,不行,我就想直接salary,那咋写?哎呀,说老师,那你这person对象我取出job,这不到位,那我这么写吧,老师这一这不得吗?同学不能这么写,你这么写人拿拿当这东西啊,它也是一个对象的key,对吧,你不能这么写,说老师那怎么写?同学你看看是不是陷入思维误区了,你这么写不就得了吗?Person点谁嘿,抄吧,点谁这一你琢磨琢磨是不是,那关注点怎么一直放在这儿呢?放在这是不是也可以啊啊啊,说老师还能这么玩,就是说老师是不是这个意思,就是第一个参数我传一个对象就行,哎,对,就这意思,你传一个对象就行,对吧?啊,你说这一不是个对象吗?是啊,有没有salary,有啊,OK,完事了。
15:50
啊说老师那模板里用这个用这个那就直接用,对呀,不需要点value了,刷新呢,看效果呀,初次展示没问题呀,变数据说变就变呢,对不?各位呀,哎,琢磨琢磨,哎,那我写到这儿啊各位有些同学啊,可能就又要反驳我说老师啊你真恶心,来来来,删了删了,我教你删掉啊老师ref走你person点嗯老师我就问你香不香,哎,走你H是不?嗯,老师我让你的眼泪啊无限的流淌是不?哎突ref边去吧,这会直接写找这1.2salary是吧?哎,看一下效果啊,先看功能刷新一波啊ref没有定义是吧,因为我确实没有引入,哎,走一波回来刷新,初次展示正常不正常,改能不能改能。
16:48
来吧同学,怎么给人解释啥to ref,去去靠边靠边直接ref不就得了吗?我就把你变成一个ref了呀,是吧?说老师,那数据数据我用了呀,person.name我读出来的呀,person.a我读出来的呀,说老师是呢,我竟无言以对,来吧,我告诉你怎么回事啊,各位,你这么写啊,咱得说没有报错,功能的确能实现,但是你知道你致命的问题在哪吗?嗯,各位,你听我说啊,你初始化的时候你真读取这张三了,但是你只是初始化的时候读取了一下张三。
17:24
然后呢,用了以后,同学你听我说人家在页面上啊,人家点这玩意儿的时候,修改姓名的时候,我告诉你各位,你改的根本就不是personally的name,老师,那我改的是啥,你改的是这个新弄出来的这个ref对象里的name。老师胡说,我觉得改的就是这里的,你怎么给我证明来证明给你看啊,走干嘛呢,我这干嘛呢?老师你这写的有毛病啊,你都说了嘛,把这些数据拆散了交出去,那你怎么还把这东西交出去呢?我不为了给你做验证吗?我不为了验证一下你改的那个name不是这里的name吗?还有就是各位怎么的,哎,我不能这么写吗?啊,我数据是我拆散了这三个,我交出去,但是我就问你同学,我这里边有800个属性,我这里有800个,然后呢,有三个是别人很常用的,那我们各位我可以把这三个拆散了交出去,你说对不对,因为啥,因为这三个常用啊,但是剩下那么多属性它不常用,那不常用咋的,我就不往出交了,别人也有可能用啊,那你说我是不是可以诶把整个把这person给他抬出去,给他交出去,你说对不?各位。
18:31
那万一人家用呢,同学就这块儿你们能不能理解是吧,咱这视频是吧,录视频也看不到大家这个反应,同学来你体会一下,就是这块这块是我拆散了,这玩意儿我往出交,但是我也可以什么呢,说拆出来三个,但我这里有100多个,800多个,那我不拆啊,那我可以把剩下那些什么97个那些东西我抬出去啊,是不依依然放在这里啊OK好,那这时候呢,页面就有人用这P了,然后我在最上方啊,我给你写1H4走完了呢,我把这P呢给它放在这儿。
19:02
啊,有一种感觉啊,就这些东西啊,都是一种感觉,拆散了我读的那这块儿呢,我想展示这个人的所有信息,对现在就有这需求了,各位,页面上不仅展示姓名,年龄,薪资啥的,这里面有100多个属性呢,我想用一个H4,把那些属性H全都展示出来,来吧,你是不是也这么写,你不嫌麻烦,你自己就写100多个去把这全都交出去是不是?各位啊,那你看一下效果啊,刷新一上来吧,同学,万事大吉的是吧?张三18啊,Job g13轮20,哎,你改来来来。同学数据分家了,你说对不啊,你这改的可开心了,但是原数据丝毫不给你动啊,为啥?同学一句话啊,你这么写就属于读取出来了,张三那个字符串给它打包成了一个新的ref页面,点的时候是绿色的东西,里边的Y6在变,而这里边的张三丝毫不变,但如果您不用这ref,诶,你用的是这个to ref,我同学就存在那个引用关系,就像我刚才说的,它是个什么东西,Ref对象里面有没有value值啊,有,那其实他偷偷的把这value值利用get指向了这对不对?各位,也就是说to ref是引用一个,那么ref是跟着你这个东西咋的复制一个是不?各位,哎,那你说这我得怎么写呢?是不是写name?嗯,那OK,这呢是吧A,嗯,那这呢,各位,这个这个这个这个停,然后在这写一个salary对不?各位诶你看是有这个引用。
20:34
关系的来,这回你再瞧同学啊,看着诶啊,增长年龄啊,往旁边点一下走,掌欣,你看我这些拆散的数据变原数据是不是也跟着变呀,这才是我们想要的,哎,你这么玩才能玩下去对不?各位哎说这人我给你了800多个属性,你爱用哪个用哪个,但是老刘要用这三个,我得把这三个拆散了给老刘,我得借助往下谁呢图re EF保持住这个连接关系,维持通话是吧,进行一个桥接,好了,就这么回事,那么同学有这个to ref,嗯,那就有一个更好的人叫to refs,嗯,同学你看你这还得这写吧,哎呀,我的天呀,Name to reh two同学,如果人真有那需求,说要你把十个都写出来,那咋的,难不成你还这么写下一直to ref不美观啊,代码复用率也不高,那这个时候给大家介绍另外一个人啊,就是to ref的升级版叫。
21:34
X啊,它能干嘛呢?嘿,同学,跟它的功能一样,它能处理一个,这哥们当然就能处理多个啊,那么接下来瞧着啊各位,我把这两行呢给你注掉这块注掉,这块呢注掉,然后各位啊,Cost X等于接下来谁工作呢?看好了是two res啊诶two ris,然后呢,把谁交过去。这个two ris和这个two RI,它俩最大的区别就是two ref只能处理一次,或者说只能处理一个属性,那你就必须得告诉人家啊,哪个对象以及哪个属性,那么这个two ris是可以批量处理一个对象里的所有属性的,那也就意味着你无需第二个参数,直接把第一个参数给他就得了。哎,就是你想把哪个对象里面的所有属性都变成ref,你说是person,他说好了,工作干完了,看一下这X啊,在这呢,加几个分割符,加几个星号吧,在这来一个小逗号看效果啊,刷新一波,各位来瞧着打开啊打开同学来,你那个person里面是不是有age啊?有没有job?哎,有没有name幕啊,那同学你看他把你这玩意都是不都变成这了?哎,OK,那job里边呢,再打开value,哎,同学你看特别给力,是不是给你变成那个pro代理了啊,那你打开这个东西的时候,同学一旦见到代理,我们心里就都有数了,那你说这些东西咋的,是不是都会给你。
22:59
变成那个响应式的呀,哎,你看这多好啊,省着你自己一个一个写了呀,嗯,说老师那这有一种感觉,这X就是一个对象。
23:08
啊,说老师是不是这么回事啊,就是我把一个正常我定义的响应式数据放在这儿,完了,经过to ref re FX的处理呢,我就得到了一个新的对象X,完了,这个X里边呢,也有我person里边呢那一堆key,但是Y6都给我替换成这个re FIL了,然后我就可以把这些东西拆出去了,然后交给模板,我单独把哪个交出去我都放心,因为啥呢,它是一个ref响应式对象,哎,就这意思,就这么回事啊,那你告诉我吧,接下来这怎么写呢?啊说老师那简单简单就不这么写了呗,哎,那我就这么的呗,老师to re FS呗,完了我就写person呗,嗯,你这么写你就错了呀,为啥错了呢?各位你干嘛呢?我问你这个东西返回值是啥。是不是一个对象你这么写对吗?你在一个对象里面直接就套一个对象,你这么写是有语法问题的啊,模板解析失败的,他告诉你了吗?就是在这儿出的问题,那怎么办?哎呀同学,看基本功了啊,解决。
24:08
是吧?哎,我在一个对象里面,通过点点点去展开另外一个对象,把two ris所生成的那个对象里边的每一组KBY6都摊在这儿了,是不?各位来保存刷新一波啊,往这边调一调啊走诶说salary没有定义,为什么呢?哎,同学你看这是为什么呢?Salary没有定义,嗯,没出来就有个K啊回来各位是因为这啊你点点点to RA你这么操作大家也看到了啊,这X你看一下走各位,人家给你的是job吧,是吧,人家给你的是job吧,那你在页面上直接用的是谁呀?Salary,那你这样的话肯定不行,那所以说同学你要通过这个two ris用这种方式,人家怎么办?只是把里边的第一层的这些东西给你拆出来,形成一个对象,人家不会傻了吧唧的把这些东西也给你往出拆,诶,那你要这样写,你就得稍微麻烦一点啊,那怎么写呢?那就得在这来吧,各位那没办法了呀,GOOBb.J一点是不,各位哎,说老师那不还得写这么多吗?你别说写不写这么多。
25:08
Person那一层是不是省了呀?哎,来,回到这儿刷新一波走着,嗯,然后呢,修改姓名,你看原数据也跟着变,增长年龄也变,涨薪也变,对不?各位,所以说你觉不觉得这个to ref和这个to refs真的很有用,是不能让你把数据拆散了交出去,当然你也可以不拆,是不拆的好处在于这儿方便呀,是不?各位来吧,总结一波,回到笔记里面,作用就是创建一个ref对象,你不可否认to re调用返回的东西还真就是1REF对象7Y6值指向另一个对象,另一个对象是谁?是person中的某个属性,可能是name,可能是age,那么语法就是Co name等于two ref person身上的name。应用就是将要将响应式对象中的某个属性单独提供给外部使用时,还不想丢失这响应式,那么最好你就得用它了,是不?各位诶这里面呢,还有一个扩展,扩展就是to。
26:08
啊,这个图呢,与这个to RI功能是一致的,但是可以批量的处理多个ref对象啊,批量的处理多个,不用再传第二个参数了,直接告诉我哥们你想操作哪个对象好了,你这里边有100个,我就处理100个,对不?各位OK,这小节我们听。
我来说两句