00:00
来我们继续啊,来看一看这个图,If这玩意儿还是挺有意思的啊,它可以把响应式对象上的某个属性变成if对象,那变完之后呢,他们两个内部操作的是同一个数据值,更新的时候呢,他们两者也是同步的啊,然后呢,If注意啊,If是拷贝了一份新的数据,单独的数据,它变化跟之前的那个想式上的数据是不会有直接的交交替关系的,就是说二者是不会影响的啊,相互不影响。那现在呢,咱们来看一看啊,这个to EF。啊,很有意思,呃,在这那我就写了呗,To rf的这个使用啊及特点,好呃,那现在简单一点啊,我就在这来一个setup。Return出来这么一个对象啊,这个对象里边有一个state,再有一个,再有一个money,再有一个upd,好把这几个都写出来啊。嗯,来一个什么呢,State。嗯,括号里边的一个对象啊,它有一个H是。
01:03
五吧。然后再给一个money啊。给他来一个五,再给他来一个money啊,Money的话我就给他来一个一百一百块好搞定啊,注意。注意这个位置啊,Cost up等于。注意啊,它是用来更新数据的啊,先扔在这儿啊,不要管它去,呃,然后在这个里边我来一个count的age,注意啊,等于的是to ref。很香这玩意儿啊,我把state里边的什么呢?这个H属性给它注意啊,这个是把响应式数据state对象中的某个属性就H嘛。变成了什么呢?Ref对象了,哦,好,所以说有了是不是好?当然我再来一个cost money等于ref。
02:00
State里边的这个什么呢。Money啊,注意。这个位置它也是把响应式对象中的某个属性。使用ref进行包装。是吧,包装吧,然后变成了一个什么呢?Ref对象。它们两者应该是有区别的啊,我们来看啊,先来看。呃,更新呢,这里边我暂时先写上一个什么呢?Cancel log测试吧,啊,而且呢,我要把这个age money state都放在上面啊。H3STATE。先来一个state,呃,再来一个H3,这里边来一个H。好,还有一个H3,这里边是money啊。嗯,很爽的啊,好之后呢,因为将来我要更新数据嘛,所以说我现在啊,再来一个HR更新数据操作啊。
03:06
Click等于update,好,注意啊,我复制一份。因为这个代码都是。比较简单的啊,所以说我就快速的去写一下啊,啊,当然这个位置已经写完了啊。那就不用再写了,好来看看啊,我要看什么,我给大家看这个东西,一个是H,一个是什么呢?Money。来看着啊,保存注意走起。看一下当前界面啊,看清楚了,我刷新。看看上面这个啊。Value。这应该是一个ref对象了,因为里边有value流吧。下边这个右边六说明这也是一个if的对象,没错吧,好。那现在我们来做什么事情啊?当我去点击按钮更新数据的时候,我让state里边的这个什么呢?H我加等于二。
04:01
我们要观察的是。这个A数据。会不会变化啊?来看一下。我咔一点变了,没有变了。同理,我再做一些事情。啊,我让这个age。点Y加等于三。保存。看效果啊,刷新。后一点发没发现这变了,上面也变了吧,所以说啊,他们两个现在应该是互通的,谁的数据变化都会影响另外一个数据,那如果说我要是改变money呢。Mon.Y6加等于十。咱们来看看啊,我妈当中数据也是从这个什么响应式对象里边拿到的。啊,我一点这变了,上面变了吗?没有。说明他们两个之间不会相互影响,它是属于什么呢?拷贝了一份谁呀,Ref,而to ref是什么呢?真正的和那个。
05:02
想是对象里边这个属性,它们之间是有关联的啊好,那我现在把这个干掉,注意啊。有什么用呢?是不是什么时候会用到to if呢?那这个时候我需要给大家去创建一个子组件啊,那我这个就不要了啊。把它删掉,这是之前的时候创建的,在这边啊,我们新建一个目录,Com component里边我来一个child。自己组件。注意看啊,注意看。HR,这里边是ch child子集组件,哎,然后这里边是child,改一下啊,注意做什么事情啊,看清楚了,我在这边要用到这个子集组件,我会怎么做呢?首先第一步引入呗,Point child from。Component下边的这个差点view啊,然后下一步不要忘了注册。
06:05
加逗号啊,Child我就直接复制过来了啊。然后我上边就可以用了呗。再来一个H2啊。差,自己组角。那我做一件事情,我要把我当前这个H传过去。冒号,冒号H等于H。看清楚了啊,注意现在我们有一个问题。大家可以思考一下啊。你说我把当前这个age传到了这个age里边去了。那我传的是ref对象呢,还是应该说是我的数据呢?那我们来看看吧。因为这块是h ref对象,我在GS当中写代码。应该是这个h.Y6的方式改变数据对不对,但是当我到了什么,到了这个HTML里边,点Y6可以省略。那点Y6可以省略,它实际上就是指的是Y6,那是不是就等于把H的这个数据给了H?
07:03
对不对,而不是把ref对象给了它,对吧?因为我们在HTML当中我再强调一遍,是省略了点VY6,如果它要是没省略Y流是不是应该是H的数据给了H,对不对?所以说大家要清楚前面这个A里边接收的是一个普通的数据,而不是IEF对象,好,Child里边要用到这个数据。H3。H。Edge,那我怎么办?我可以通过pro去接收,当然咱们可以写对象的方式,那age呢,也可以写对象方式,比如说它的type是什么呢?Number类型,比如说re eqid required,哪个true代表是什么?必须与的啊,必须得往里边传,对不对?注意啊,那这个时候,那这个时候。我上面是不是可以使用A呢?我们来看一下。打开我当前这个界面,我们来看A5没有问题。那当我点击按钮的时候,上面数据变化了,下面数据也跟着变化了,对不对。
08:00
好。但是我希望的是。能够把这个age数据,它的字串的长度给我展示出来,所以说我这个位置需要一个H3。括号,我需要有length的这么一个数据,但是我现在有吗?没有怎么办啊,怎么办?我可以在下边怎么写set up括号括号return这么一个对象,把let丢进去,那我现在是不是得需要一个let comes LG等于比如说我来一个柚子F。呃呃,那我就写个get什么呢?然后括号。这个里边我把当前的H传进去,行不行不行。我拿不到。那我props接收的age数据怎么才能往里边传?哎,我可以在这个位置来一个pros的方式,对不对,这它可以穿穿吗?那pro里边是不是有一个A的这么一个属性吧,可以往里面传,但是巧了。这个互函数是别人定义的。
09:00
我假设定义一下啊,别人定义的,别人定义的时候吧,他往里边传的这个H。他写了一个ref类型的。好,那注意,如果要是这样的类型的话,而且是你的数据变化,我就帮你快速的去计算出来这个数据的长度,那我是不是就得用。Computed。对不对,那我需要计算属性。赢起来注意了,问题是什么呢?括号,括号这我应该写什么?我应该写的是当前的这个什么h.Y6。点less,当然啊,你可以去点兔子。那我们看ref没有,那引入就行了啊,注意啊,我再强调一遍,是说当前的这个霍克函数是别人定义的,别人定义的时候要的并不是一个数据,而是一个什么。并不是一个普通数据,而是一个if类型的对象。那大家想,我是不是就得这么去写吧?好,现在假设我调用了,我调用之后把H传去行吗?那好,不行,那我把props里边的H传去行吗?也不行,为什么?因为人家要的是一个ref类型的数据,而我的H是一个普通的number类型数据。
10:06
怎么办?那我是不是应该把这个数据变成if的对象吧,To ref。并且是pros后边的这个属性。现在我再保存,再保存。强我们打开页面看一下啊,那S没有数据是吗?没有数据我再刷新一下啊。那果然没有数据,那我更改了也没数据,那怎么办呢?那有可能是因为当前这个数据是一个字串啊,是一个数字,那我再点to s t r NG吧,这么去调一把。咱们再来看一下啊。诶,大家看现在有个一是不是我去改数据了啊。我再点再点再点诶两位了。嗯,还有两位没有问题,好,这个就是to ref,它的这个特点及使用地方啊。
我来说两句