00:00
好,这一个问题啊,Relative和ref的细节问题,这个问题呢,它并不是很多啊,咱们只要通过代码的方式呢,演示一下,稍微做总结就可以啊,它里边主要是涉及到什么问题呢?就是关于这个ref也可以对对象进行一个处理,那咱们来看一看啊,嗯,首先呢,我把我们之前讲的代码给它保存一下啊。在这边来一个文件夹,这个是零六杠setup的细节问题,好,然后呢,我把他们两个直接复制一份放到这个里边来。哎,这样就搞定了。搞定了之后呢,那我的compound那次就不需要了。删掉它。之后呢,APP当中的代码我们也都不要了啊,直接来个VV3。诶,好,那我这块呢,就写上一个H2吧。嗯,是R和ref。的细节问题。啊,格式化一下啊,那我这里边先来一个set up括号括号,诶多了括号,嗯,Return出去一个对象,然后呢,因为我上边要显示一些数据啊,我先把它罗列出来。
01:09
嗯,那我就来一个H3,然后呢是M1。来一个M1。那我把这个代码呢,复制一下,这个是二,这个是三,同样的这个是三,这个是二啊,当然我需要这几个数据,那我现在没有啊,没有怎么办呢?M一来一个,M2来一个,M3来一个比较简单啊。好,那我肯定应该是在这边com me,等于一个ref吧,里边写个AABC。好,当然ref没有,没有的话,我需要引入进来,还有一个啊,也引入进来啊,这是第一个对象,那么它是通过ref的这个方式。然后呢,设置的这个数据。好,还有一个Co的M2等于re的方式,那我里边应该传入一个对象了啊,这个对象是啥呢?我一会再写,还有一个Co的M3等于的是ref,我ref里边也写个对象,问题就在这儿啊,就是说这个ref也可以也也可以啊,传入对象吗?
02:12
传入对象吗?好,那这时候咱们要讲的一个重点问题啊呃,Real处理的对象是要经过包装的啊,是要经过这个proxy类型进行处理这个代理对象的方式。那ref的方式呢,里边最终会变成一个ref的对象,然后里边得通过value的方式去访问里边对应的数据啊好,那我最终啊在界面里边,因为我要去点击按钮的方式显示出来这个效果,所以说我下边再来一个按钮,Button,我们就叫做更新数据吧。那里边我写上一个click,嗯,等于叫update,那我需要这个函数没有怎么办呢?啊,定义出来,那我就来一个count update等于来一个回调,比较简单啊好。呃,这里边我们做的第一件事情就是要更新这里边儿数据,然后从而观察有什么样的效果,最终呢做一个总结,那这个里边我先给他一点复杂的数据啊,比如说我给他来一个name叫小明,然后呢再来一个对象,比如说外。
03:12
嗯嗯,那就给他一个内幕吧,这个是小红吧啊。呃,然后把这个代码直接复制一份吧,放在这儿,其实道理都是一样的啊,我们主要是来看看。好,当然呢,我们再来看这啊这。这个是要更新数据的啊。好,现在呢,我们就直接来一个,我想把M1当中的数据给它改变了,那怎么办呢?那就是M一点Y6是吧,加等于诶等等等。然后呢,我还希望改M2里边这个内的数据啊,改这个外的数据吧,好,那我这块就是M2当中的外,然后里边的内。啊等于啊加等于。等等。
04:00
好搞定,我还要去改M3的,那M3是通过ref的方式进行包装的,所以说呢,这个位置应该是M3,点什么呢?Value,然后再去点里边的啊这个name。加等于,我也是写上三个等号,这样我们先来看效果啊。好刷新一下,然后我去一点大家看啊,这个变了,这边呢,这个name也变了,那这边这个内呢,它也是变了是吧,我想把这个外改了,那我我们应该怎么写呢?我就把它去掉呗,无非就是通过谁呢M3点Y6,然后再去点里边的内。哎,加等于等等等,哎,我们看看可不可以啊。哎,刷新点一下。大家看一下这是可以的是吧?诶这个是M3里边的内啊,我希望改的是M3里边的内啊,不是内是外。Wife,然后点这个层次还是比较深的啊。嗯,这样我们再来看啊,我点一下我看啊,这个改了,这个也改了,这个也改了啊,确实都改了是吧?好,那我们来看看啊。
05:07
现在我们来回顾一下这些文字内容是什么意思。嗯,我把它放在这儿。放在这儿之后呢,先把它注释一下,然后再做一个缩进的操作。诶放在这儿了,我们看啊,说VIEW3的composition API,也就说什么呢,组合API中有两个重要的响应式的API,那哪两个,一个就是ref和re TV了啊这两个,那ref呢,是用来做处理基本类型的数据。Relative呢,是用来处理对象的,当然它可以递归深度响应式啊,这一点咱们刚才已经看得到了啊,但是不可思议的是什么呢?根据上边的描述,我们就会发现一个问题,其实我这个if当中也可以传入对象。对不对啊,也可以传,然后我们再来看啊,如果用ref往里边放对象或者数组的方式,内部会自动的将对象或数组转化为处理的对象是吗?啊,我们来看看M3啊就知道了。
06:03
那我就在这个位置吧,Cano.log括号来个M3,是不是这个样子。好,我这边做一个刷新的操作啊,然后我们来看一看,点一下诶,果然有个ref的对象,好,那我去点开之后呢,我们来看看它的value,诶注意看proxy。那就说明确实是这个样子,哪个样子呢?就是说ref里边如果传入的是一个对象,这个对象是通过进行处理的,然后呢,最终变成一个pro类型的对象。嗯,确实如此,然后我就可以在这个位置写这么一句话了啊。那也就说ref中如果放入的放入的是一个对象的话,哎,那么是经过了什么呢?R的处理。然后呢,形成了什么,形成了一个什么类型呢?Proxy类型的对象proxy。
07:00
类型的对象啊。然后再往后看。说啊,这个if的内部通过value流属性添加呃get和的方式实现了数据的解释,这非常正常啊啊,有了get和之后才可以进行修改,才可以获取数据,对不对?呃,那呢是通过pro。对象来实现对对象内部所有的数据进行持它,当然呢,这里边也会有对应的什么呢,Get方法,Set方法,Delete方法等等等啊,并通过操作对象内部的数据,就是通过他代理回来的这个对象来操作咱们目标对象当中的数据呗,那if的数据操作是在GS当中需要点value,那很明显无论是M1还是M3,无论你放的是基本类型的数据还是放到对象,那我要想操作里边数据都得通过什么呢?点value的方式,哎,这个没什么可说的。然后呢,模板中是不需要的,诶为啥呢?因为模板里边可以直接使用M1M2M3是吧?啊那个为啥呢?因为内部解析模板是会自动加上什么呢?点VALUE6啊,所以说模板里边是不需要点value的,这块咱们主要涉及到一个什么问题,就是ref的这种函数,它内部不仅可以放入基本类型数据,它也可以放入什么呢?哎,这个对象的数据,当然啊,放入对象的这个数据呢,它实际上是要经过relative进行处理的啊。
08:14
然后最终变成了pro类型的对象,那么现在啊,我们再来看一下,那你说我当前的这个对象是通过pro类型的对象啊,产生了proc类型的代理对象,那我就想这个外是不是代理对象呢?我们再来看一下,我在这啊最后再输出一下。嗯,M3点吧,Y流里边的这个外,我们来看看它是不是一个代理对象。好,那我这边做一个刷新操作,然后点一下按钮。点一下按钮,我们来看,诶也是pro类型的啊,里边有这个小红啊,哎,它不仅应该有小红,它有什么呢?它还应该有啊对他现在就一个小红,因为只写一个内幕嘛,没有写其他属性啊,那如果说我这个外里边再有对象,那怎么办?里边那个对象也会被进行代理操作啊好,这个呢,咱们就来说一说。
09:03
呃,刚刚呢,咱们说了一下ref和这个relative它的一个细节问题啊,最主要的是大家一定要注意了啊,就说ref当中实际上也可以放对象,但是我觉得什么就是本身就可以放对象,那么我们没有必要用ref的方式往里边再放对象了,是吧?但如果放对象,你要清楚它到底是怎么回事啊。
我来说两句