00:00
来各位升级一下啊,我想让这人呢,不仅仅有名字年龄,还想让这人啊有一个工作信息,Light一个什么呢,照ref,但是工作信息啊,我不想直接把它写成一个基本数据类型,哎,不想写一个什么啊引号,什么程序员啊设计师什么的同学,我想让这工作呀,高端一点,让它是一个对象类型的数据,那也就意味着各位开始了啊走是不是对象类型,那么工作呢,就包含比如说工作的种类吧,啊随便写一个,比如说是前端啊工程师,好,那再走,那工作呢,还有这个啊,工作不就为了他嘛,什么呢,薪水是吧,哎,比如说呢是30KOK,写完了吧,那接下来呢,这个工作得交出去,那在页面上呢,我想呈现呢,就再来两个,不是H2了,是H3,这呢也给他换一下啊,H3那这块呢叫做工作种类,好,那这呢叫做工作薪水,哎,或者叫薪。
01:00
分字都行,那你说这得怎么写呀?Gob job吧,咱说了模板里面从来就不用点Y6,所以说job点别客气ta,那这呢,Job点别客气谁呢?Salary OK了吧,回头看一下初始化显示的效果,刷新前端工程师30KOK,没问题,接下来提个需求,修改这个人的信息的时候,我想把工作种类和薪水都改一改,那就回到代码里,你说接下来得怎么写呢?啊,在这儿接着写呗。哎,同学,你说我这么写对不对啊?照吧,第二太啊,来吧,弹幕走一波,同学,你说我这么写对不对?或者你觉得不对,你说怎么写对?哎,job.type就直接写,你说行吗?绝对不行,同学,我们都已经发现了ref只要一加工,我不管你是什么数据类型啊,你是基本的还是什么对象的,我不管你是啥,你爱啥啥,只要我一加工,你的张三18,你的对象全都变成了一个什么东西来着?Ref引用对象,对不?那么你想得到东西,同学你就必须点Y6,咱就这说吧,想得到张三吗?点Y6去,想得到18吗?点Y6去,那你想得到这个对象吗?你点歪溜去。所以说各位啊,这块你应该能推断出来,我得点歪溜,那问题是接下来我得怎么写?
02:18
job.value冷静的分析问题,啊各位job.value啊,你是得到了这个东西,那你想干嘛?你想修改这个绿色的东西里面的type和salary,那所以说我得点什么呢?Type?哎,重点来了,各位,你说这个type是不是响应式的数据呢?或者咱这么说啊,这个type让你去设计,你觉得它应不应该是个响应式的数据呢?我觉得应该啥意思?我不管你给我传入的数据有多么的复杂,哪怕是N层对象嵌套在一起,什么N层数组嵌套在一起,我不管你,我得给你一个承诺,不管你隐藏的有多深,我都得让这个数据是啥响应式的,想想同学V2是不是就是这么做的对不?我不管你给我传入的那个对象嵌套层次有多深,我就能给你一个承诺,我能一层一层找,我会便利所有的层级,对不对?那你说VIEW2都已经这样做了,VIEW3呢,它不能退步吧,各位他是不是也得维持住啊?我不管你给我传的这个对象有多复杂,不管是多少层嵌套,我都得保证每一个对象里的每一个属性是不是都得是响应式的。
03:29
那你说同学我既然都说到这儿了啊,那你猜猜呗,按照咱们的分析,你说得怎么着,这个type它底层是不是也得把它变成响应式的呀,那怎么变成响应式的呢?啊,那咱们目前按照这个理论的分析,好像应该也得借助ref完了,生成一个什么ref引用对象,然后呢,读取里边的Y6值,所以说好像有一种感觉咋的各位还得点Y6。是吧,哎,那咱试试啊,把这个前端工程师呢,给它改成UI设计师,然后这些我都注掉啊,这些不改,这也不改,因为我们知道啊,这两行改是起作用的,我们关注的就是这儿啊来看一下效果啊各位刷新一波321走。
04:13
报错了,报什么错误呢?读一读呗,不能够在一个字符串前端工程师里面去读取一个属性叫做value,哎哟,我的天呐,同学好像出事儿了,你告诉我吧,哪个Y6写多了,人家都说了前端工程师这个字符串不能读取Y6,也就意味着哥们儿前端工程师啥东西那个type你已经读取出来了,那错就错在你是不是加了第二个Y6啊?啊说老师那就是不应该加呗,哎呀,我的天呐,老师到底加不加给我整乱了,同学来吧,最好的方式呢是这样,你也别说加,我也别说不加,住掉,咱们就老老实实的,我给你实实在在的输出这个照个点歪六哎,咱就明白了,来各位刷新一波,你瞧好了,各位321走,你告诉我吧,加与不加,嗯,你说加还是不加,Type已经是前端工程师了,各位salary已经是30了,你说加不加不加呗,哎,老师啊,我发现一个事儿,哎你看它不是那个什么re Fi PL那个实力对象了,是实力对象,这是咋回事呢?同学你听我说这块呢,及到三对不同数据进行响应的一个处理对象类型,人家底层用的我告诉你都是这个pro说老师它是什么呢?它是个库啊,它哪个库也不是哥们这个东西在window身上呢,自带的。
05:42
啊,ES6里面一个新的东西,回头我们会仔细分析的,但是在这儿同学咱先暂时放过它啊,我就问你应不应该点value,不应该,那也就意味着咋的这块主调这块打开,想改成设计师吗?想那就这么写,想改薪水吗?来,那就这么写,怎么写呢?30换一个吧,比如说是60K,诶说老师我一看这个,我赶紧干UI去了,我这只是举一个例子啊,OK,好了,这回呢,你看一下效果,刷新一波走,你数据变没变了,页面更新没更新了。
06:14
是吧?哎,体会体会啊,说老师明白了,就是一旦我拿到了ref里面传入的对象,然后呢,我就不用再去哎这个点歪流了,嗯,是的,哎,只是拿到第一层的时候,你去点歪流是不?嗯,我们粗浅的理解目前呢是这样的,那么在这儿呢,各位刚才我放过的那个问题啊,我还想再重新说一下,说什么呢?来各位,接下来你别嫌我这图墨迹啊,我要完整的给你画一遍,刚才啊,你把字符串张三传给了ref,哎,然后ref说来吧,哥们儿,你是不是想做响应式啊,我就把你的张三啊变成一个re引用对象了,也就是说各位,你这name经过ref的一加工,诶,它其实就是谁了呢?来各位啊,完整点写ref I PL,哎,这么一个实力对象,它的实例对象身上有很多的属性啊,但是我们更关注的是谁呢?Value对吧?OK,写完了,那么他的分析呢就结束了,但我们心里明白啊各位,其实他在这用的是什么呢?
07:14
怎么去实现的这个响应式,各位我写几个小字啊,Get和塞能看清不?应该差不多哈,应该差不多来,那再往下分析,你这个age,你把18传给了ref,人家给你加工生成的这个A,各位来走着,其实也是谁呀,RFIPL的什么呢?实例对象身上也是有一对一的东解,哎,对于我们来说最有用的是谁呢?Y6对不?哎,在这儿呢,再括回来,别嫌墨迹啊,分析一下对以后的理解有帮助,那同样的这块其实用的也是谁呢?哎,Get,还有也就是说各位如果没有object.property如果没有get,谁也玩不下去,Ref也玩不下去是吧?各位走这儿照吧啊,你把这个对象啊交给这个ref了,那么他就帮你生成了这么一个东西来接着写啊,各位走,Ref I PL这么一个实例,对象身上有很多的东西,然后在这呢,诶对于我们来说,更关注的就是这个Y6好了。
08:14
再给它扩灰,哎,换个颜色扩灰,那里边呢,他用到也是,哎哟,我的天呐,Get还有什么呢?塞好了各位接下来再分析,重点要出来了,听了这么半天啊,重点要出来了,来各位瞧好了,在这儿啊,这个job里面的值是不是又是一个对象?同学,你这个Y6就是张三字符串,你这Y6啊,就是一个数值18,但是同学在这儿啊,有点意思,这个Y6的值居然又是一个什么东西对象,那对象里面有着type啊,还有着哪个属性呢?Salary是不?各位,那你说他如果想实现这个type的响应式,那就意味着他底层应该写一个便利,我们现在只是理论的分析啊各位,就是咱们正常分析应该是这样的,你得写一个遍历,你得一层一层拆啊,发现type同学也得做响应式,那于是乎呢,他就也得把这个type变成一个ref I PL,然后同样的啊,身上呢,有很多很多的属性,哎,我们更关注的呢,是这个Y6,然后呢,给它扩回走,那同理,同学这个不差最后这一下了啊,给它写上也得变成一个IEFIPL是不是各位,哎,走着点点点也有很多的东西我们更关注。
09:32
这是这VALUE6是不各位,哎,在这儿扩回理论的分析,就是这样,如果说salary,各位你听我说,如果说salary也是一个对象,里边含有A,里边含有B,那就意味着它得继续遍历,把这A和B也得用ref加工一下,也得生成refl这个实例对象,对不对?各位层层变利嘛。理论的分析啊,确实是这样的,但是事实呢,事实不是这样的,因为刚才你已经看见了各位,如果他真是这么实现的,那我问各位,你想取出type,您得怎么写?首先job.value你得拿到这个对象,对不?你已经写了一个job.value了,那你还想拿到type的值,你告诉我你得咋写?
10:16
哎,写完了点太吧,后边还得跟着写点儿啥玩意儿,是不是点value流,但是同学我问一下,刚才在这儿你需要点歪流了吗?没有,那就强有力的证明了一件事情,证明了什么事情呢?那就是说ref这个东西,对于基本类型的数据啊,它确实呢是直接用的这个get s,对不?然后点value去取的,但是对于这儿啊,这种对象类型里面的属性来说,同学他没有继续去使用re fipll这个实例对象。哎,也就是说各位ref处理基本数据类型,那确实用的是def pro,然后呢,走的是get这种数据劫持的方式是不?各位说的精准一点,数据劫持大家还记得不?数据劫持才是响应式的根基,我得劫持到你修改的数据我捕获到了,然后呢,我再写一个逻辑去更新页面,对不?各位那说白了就是这条线其实不存在,这条线其实也不存在。
11:16
啊,那不存在这两条线,它到底是怎么实现TYPE1改页面就变呢?那怎么实现SALARY1改页面就变呢?诶说老师那也用到了get塞没有,他如果要是用到了get塞,那肯定就用这个东西了,因为这个东西里面不是封装了get吗?哎,说老师那他怎么实现的呢?正如你刚才所见呢,我的各位你看一下刚才你见到了什么呀,刷新一下走,你见到了那个job,人家没有把里边的每一个东西变成ref引用对象,人家是把你传入的这个对象来,就这玩意儿,就你传入的这个红色对象经过了一番加工,变成了什么呢?变成了一个名为proxy的代理对象,啊在这呢,同学我可以先不说代理这事啊,咱就说proxy对象啊,那你看这不在这儿呢吗?是不,各位他要是真把你那对象拿过来直接使用,我就告诉你各位,这块体现的应该是object,然后后边写的是对象里边乱七八糟。
12:16
一些内容,你说对吧,各位,哎,OK,行,就是简单给大家铺垫一下一句话吧,Ref处理基本数据类型用的确实是get,确实是property,但是处理什么?哎,这个对象类型的数据用的是一个ES6里面更高端的人谁prox完毕,来回头总结一波各位,Ref的作用是定义一个响应式的数据,哎,如果你这数据说一锤子买卖以后也不想改了,那你可以不用ref,那么语法就是cost,哎,或者用light都行啊,定义这么一个东西,然后呢,Ref把你的初始值引initial手value流传进去,哎,说老师你怎么用light呢?这块啊,我得说一下各位,这个看你基本功了,你说我constant一个OBJ等于这么一个对象,你说我以后能不能写这段代码,OBj.a等于一,能不能写?
13:02
同学哎,允许这么写,但是不允许你这么写,哥们儿,不允许你这么写OBJ等于再来一个对象,这肯定不行了,明白不?哎,Count的定义的这个对象是可以修改里面的属性的啊来,再往下读,创建一个包含响应式数据的引用对象,谁是引用对象啊?回到在哪里告诉大家,它是引用对象,它也是,它也是name age job都是引用对象啊引用对象的全称呢,叫做reference对象,我们以后简称ref对象可以吧?各位,那在这呢,补一下啊各位在这来一个逗号,叫做简称ref对象,OK,然后GS中呢,如果你想操作数据,那麻烦点了,不好意思了,您得你得点Y6,那么模板中读取数据是不需要点Y6的,对不?各位,那么备注,接收的数据可以是基本类型,也可以是对象类型是不是?哎,Re,来者不拒,你给他什么呢都可以,那么基本数据类型它的响应式是靠object点与完成的。那么对象类。
14:02
型的数据呢?他在内部求助了VIEW3中的一个新函数,叫做react。说老师你刚才可不是这么说的啊,你刚才说对象类型的数据,它用了ES6里的一个新方式,叫做proxy实现的响应式啊,那在这怎么换了呢?诶,你看看你这个善变的男人在这你又说了是reactive函数,这呢我说一下啊各位,就是在比如三中,Ref如果接受到一个对象类型的数据啊,他确实从根上来讲用的是ES6里的这个prox,但是在比如三当中,它没有直接就是给你写那段代码,他把这个prox操作呢,封装在一个reactive函数当中了,哎,就说白了吧,各位,Reactive这个函数里面其实写了具体对prox的实现,那么你的ref接收到了一个对象类型,想把它变成,那么如果你不麻烦你自己再一套同样的逻辑,咱就说view的作者再写一套同样逻辑去操作这个,但是由于react里面已经写了,那怎么办?人家内部就去求助一下reactive就得了呗,那reactive是什么呢?诶,我们下一小节去说,好吧各位,哎,这小节的东西呢?
15:09
我们就讲完了,那我把这src呢,给它复制一份走,哎,叫做零三_src走叫做ref函数的使用,或者就叫ref函数得了,哎,各位注意区分啊,对于我们编码来说,我们关注的是什么呢?就是到底点不点Y6啊,原则就是你想取出ref里面传入的东西,那你就点加Y6,然后后边如果你想继续再取东西,不用点Y6了,因为已经不是通过ref引用对象实现的响应式了,是吧,各位好了,那这小节呢,我们听。
我来说两句