00:00
刚刚呢,咱们把那个setup还有ref呢演示了一下啊,看了看它的基本使用,那现在呢,我们再来看这个它的作用呢,可以定义多个数据的形式。换言之啊,如果我的这个数据是对象的话,我希望我的对象是显示的数据,那么这个时候我们可以用relative,接下来呢,咱们通过一个小例子看看它是怎么用的啊。那我就在这边先给他来一个H2的标签吧,R的使用啊,那我的需求是什么呢?啊这样的。然后显示用户的相关信息,然后点击按钮。逗号可以更新用户的相关信息数据啊,那按照这种情况来看的话,我应该先把setup给它写出来,因为所有的东西到VIEW3里边儿,几乎大多数东西都会放到setup当中去写啊。不要忘了最终return一个什么对象,好,那我就先来一个数据啊,来一个count,比如说叫做user吧,哎,User等于的是re re,注意啊,我直接回车,因为这块有个小扳手,啪一回车上边是不是就自动引入了吧?当然ref我也不用,那我就把它删掉好括号。
01:19
注意啊,注意这里边儿可以传入对象,那我最终出去的就是一个user了啊。那我的这个对象里边有什么东西呢?比如说有名字来一个小名,诶逗号再来一个age,给他来一个20。外吧,再给他来一个外。也是一个对象嘛,是吧,Name肖甜甜。年龄给他个18岁,呃,我再给他个什么呢?再给他个卡吧,是吧,这就是数组嘛,呃,他的媳妇有多少辆车,比如说第一个是奔驰啊,第二个是宝马,第三个是奥迪,好搞定。那我这儿呢,整个就是一个对象的数据,通过react react可以把它变成一个响应式的数据啊,当然我们可以把这块的这些内容啊,都给它复制过来。
02:10
这样呢,我们可以在哪呢?在这儿吧。来一个杠,星星杠杠。杠,星星杠。过来,诶回事。拿进来啊,格式化一下。那我整体的这个位置的内容呢,稍微动一下好了可以啊,好也可以干嘛呢?啊把数据变成。把数据变成。响应式的这个数据,应该说是把复杂数据变成响式的数据是吧?啊,这没关系啊,暂且可以这么写吧,然后呢,现在我要做一件事情,我也要更新数据啊,而且我要展示数数据啊,是吧?所以说怎么办呢?H3吧。乘以个三吧,那第一个的话,我要显示名字是吧,第二个是年龄,嗯,第三个是媳妇。
03:02
啊,括号括号,那这个我应该用到user里边数据是吧,那我user的已经暴露出来了,所以说这个位置的话就是u.Y。哎呀,有点不太好意思啊。use.name之后再来一个括号,括号use.h啊,不知道有什么有什么效果是吧,咱先保存看一下,这边看一下呗,是吧。看一下效果。刷新一下,哎,果然那名字是小名,年龄20,媳妇有名字啊年龄啊,还有卡是吧?诶太好了,可以正常显示,说明是没有问题的啊,那下一个问题是是什么呢?我要点击按钮啊。啊,来一个按钮什么呢?更新数据啊,So easy,那就是艾特CL吧,是吧,等于updt update user吧,好。那我把这个方法拿过来之前,咱们在写方法的时候注意啊,这是方法啊,这么写的方式,它括号括号是吧?啊那我现在不用这种写法可不可以啊,也可以好我们可以这样改啊cost咔拿过来等于咔括号咔咔就这么几下就完事了呗,啊一样的道理啊啊不要忘了把这个方法要暴露出去,好那现在呢,我要更新这里边数据是不是,那我就应该写U点什么呢?Name等于啊来一个什么呢?
04:16
呃,小红吧,好保存。哎,让我去刷新一下啊,注意。好一点按钮,诶果然变了是吧,没有问题,可以的是吧,啊OK,好,那我能更新名字是吧,我还可以更新什么,这样吧,我加等于吧。哎,这样能够看效果是吧,那我再来一个u.a吧,是吧,来个加等于二吧。有点wife。外服里边的这个内幕吧,换个人小甜甜换成一个大甜甜啊,算了,我也这样吧,直接加等于吧,这样看效果更明显是吧。下架吧。嗯,U点外里边的这个卡斯啊,里边的这个零,我现在给他换了叫做什么玛莎拉蒂。
05:02
是吧,哎,保存我们来看看啊,可不可以实现。呃,刷新一把,现在点击这个按钮,我一点,诶没有问题,年龄没有问题,小甜甜没有问题,年龄呢没改是吧,卡已经改了是吧,说明这个数据可以更新,而且是响应式的数据,这是没有问题的啊,现在我们再来看看啊。说这个relative它的作用啊,Rev。那么可以定义多个数据的详式,这没问题。但是这个位置说什么接收一个普通对象,然后返回该普通对象的响应式对象,代理器对象,这是什么意思呢?不知道。所以说怎么办,观察o.log括号,观察这个user啊是个什么玩意。走起。然后我们去刷新。Proy代理,代理的意思,Proxy。然后里边也有什么呢?Name也有也有是吧?啊,这里边有handle了。就是处理器。
06:00
里边有什么delete呀,Get呀,Has own啊,Set就是什么呢?删除啊,获取呀,是否存在呀,根据哪个K呀,然后有设置这些东西,还有什么呢?这是应该是内置的东西了啊,内置对象他给的目标对象age name外,诶这些数据不就是刚才我在这个relative里边所写的这个对象的数据吗?是不是,哎,还有吗?还有什么东西吗?没了,这应该可能是个接口什么东西是吧?好,那现在就说明一个问题呀,咱们这里边这个user这个一调用,实际上返回的是一个proxy的代理对象啊,那么被代理者就是。这是什么呢?RI为中的这个传入的对象了,如果说啊,我在这个位置这么干。我这么写。Count obj等于。
07:00
这一块我写个OBJ,那这个意思就是什么呢?返回的是一个proxy的代理对象,被代理者是OBJ。对吧。被代理者。被代理的啊,被代理的对象就是OBJ对象,那这个对象也就是我们叫的目标对象,所以说这块的话,改一下被代理的目标对象吧。目标对象就是OBG对象,返回的是一个PSY的代理对象啊,注意。这个要搞清楚啊,User现在现在是代理对象,然后呢,OBJ是什么呢?目标对象谁是代理者应该很清楚,有的是是吧?诶那我就想了,既然是这个样子,现在这个不都是proxy类型的代理对象吗?是吧,那我就想了,我把它去掉,我为什么要这么去更新呢?那我直接用OB这点内等于是吧,小白这么去写不也行吗?是不是,或者说我来一个什么呢?加等于等等等。
08:08
如果要这么写,它不香吗?是不是,然后我们来看看啊。刷新一下。哎,然后我这边一点,诶界面没有变化。所以说现在也就能够看得出来啊,如果说你希望这个数据是响应式的数据,要么用ref,要么用什么呢?不要给我,如果直接这样写界面是不会更新的。注意了好改掉啊注意。直接直接使用目标对象的方式来。干嘛呢?更新属性的值,或者说更新对象中的成员的值啊,直接使用目标对象的方式来更新。目标目标对象中的什么的成员的这个值。逗号是不可能的是吧?哎,是不可能的,那逗号只能使用什么呢?代理对象的这个方式来更新数据,因为这种方式它是真正的响应式数据是不是,哎,所以说这个代码应该这么去写啊,上面那个不行啊,上面那个不行,下面的可以啊,下面那可以,而且这块我们可以再加上一点啊,此时这个注意这个user对象的类型是什么,是prox y。
09:31
是吧,那我们之前的那个ref当中这个位置,注意这儿呢,啊,这个ref当中应该说此时的这个count的类型应该是什么呢?Ref类型对吧?哎,这边稍微补这么一句啊好。然后呢,我们继续啊,再来看说呀,Cost p sy等于relative OG是吧?接收一个普通对象,然后返回该普通对象,响应是代理对象,这个大家应该清楚了是吧?响应式转换式深层的会影响对象内部所有嵌套属性,所以说啊,Relative。
10:09
啊,把这个数据变成响应式对象之后,里边的数据无论多深是吧,只要这个数据更新了,那么整个这个响应式它是影响是比较深层次的,而且界面也会更新,所以说它算是一个深层次的这么一个更新操作。啊,深层次的的形式啊,然后内部基于ES6的PSY实现。实现代理对象操作语言对象内部数据都是显示的,也就是说它这里边儿这个。可以叫做数据代理的方式啊,或者说叫做响应式,呃,数据它的这个代理操作啊,内部是通过的是ES6里边的proxy这个对象来实现的啊,那这个proxy是吧,Pro这个东西我们可以去稍微查一查啊,比如说我们去找到对应的MDN。里边我们去输入proxy趴一回车啊,我们来看看有没有这的。
11:06
点击进来说proxy对象用于定义基本操作的自定义行为,你看到这句话有可能会懵。是吧,如属性查找,赋值枚举,函数调用等等等啊。实际上简单一点就说什么呢?Pro可以实现数据的代理。啊,可以实现数据代理,里边有什么呢?憨多勒这个什么的处理器。啊,还有什么呢?Target给的这两个是我们比较常用的,Target给的就是我要被代理的目标对象了啊,它里边也有这个基本语法,回头之后呢,咱们来看看,通过这个自己手写pro手写代码的方式来实现这个数据代理啊刚刚呢,咱们在这里边说的是它的这个使用方式啊,注意了。
我来说两句