00:00
刚刚呢,咱们简单的演示一下setup它的使用是吧,接下来呢,咱们来细细的说一说这个setup和if到底是怎么回事啊,首先我在这边呢,新建一个目录,这个目录是零二杠,然后来一个叫做setup的初始吧。是吧,我把刚刚的那个app.view的文件呢,放在这个目录里边。然后把app.view当中的一些代码全都把它干掉啊,咱们来去讲setup和ref是怎么回事。那这里边儿的这些代码呢,我就不不要了啊,这个我也去掉吧。这个不要啊,这个我也不要了。啊,简单一点,格式化一下啊。在这个里边啊,这样我先来一个H2吧,叫set up和ref的,这个基本使用好。那我在这边呢,提出来一个需求。这个需求就是什么呢?呃,页面打开后可以直接看到一个数据,然后呢,点击按钮后逗号该数据,该数据可以发生变化啊,就这么一个需求。
01:12
那么再去讲这个需求的时候呢,我用两种方式给大家去讲啊,第一个是用U2的方式实现,那第二个呢,我们用VIEW3的这个方式实现。好,那首先啊,为了显示这个数据,我在这儿呢,这么写来一个H3。差值来一个count。然后呢,我再来一个按钮叫更新数据,那按钮应该点击啊,做什么事情click,这都是V2的语法,这没有问题,Update。Count啊好,VIEW2里边实现,首先我们会有一个date,并且呢定义一个count,默认是零吧。之后呢,逗号再来一个MAS配置对象。那里边儿应该有一个方法。里边可以直接this count。
02:02
加价。把格式化保存,我们打开页面看效果啊。非常简单啊,一点也不麻烦,然后呢,我们去点一下,大家看数据变化了是吧,当然我们可以刷新一下啊。点一下没有问题是吧,好。可以轻松的就实现了啊,注意这是属性。是吧,那这个是什么呢,方法好。从这个代码当中,我们可以清楚的看到VIEW3当中是支持VIEW2里边大多数语法的,啊好,现在呢,我把这种方式干掉,不要了。V3当中怎么实现啊,首先。Set,诶,空格setup是组合。APIAPI的这个入口函数啊,比如说程序一直行,它会先进入到setup当中啊,然后我们来看啊setup括号,括号内部返回来的是一个对象,注意啊,它。返回的是一个对象,那么我也需要count数据,我也需要update,这个方法该怎么用呢?是吧?首先我们可以在这个位置来一个let count等于零吧,是吧?紧接着这个啊,这是一个变量啊,变量在这个return当中,再写上count,就相当于说把count的变量给了count属性了,这个位置应该这么写的,我们只不过是简化解法啊,所以说现在它是一个属性。
03:22
啊,这是没有问题的,然后下边我应该再来一个什么呢方法。那我们这个方法呢,就直接诶把这个update拿过来啊。呃,前面呢,我们需要加上一个function fun,然后小括号大括号,那在这里边应该来一个count什么呢?加加,并且这个位置把这个方法也暴露出来啊。那就是update,嗯,我写找到它吧,复制过来啊。好,现在呢,我就保存。写完了啊,打开界面,我们刷新一下。之后呢,我用鼠标去点点点大家会发现根本就没有效果。但是呢,下边报错了吗?也没有,那估计有同学可能会想啊,说可能这个方法没有实现是吧,那咱们来看一下啊。
04:06
没有执行。保存一下。那此时呢,我们再来看一下,我去刷新。当我点击按钮的时候,大家可以看到下边是有这个内容的,说明这个方法确实执行了,但是为什么这里边儿没有效果,因为此时的这个数据并不是响应式的数据,何为响应式的数据呢?这个响应式的数据指的是什么呢?数据变化OK,那么页面跟着渲染变化啊,那这样的数据称之为什么呢?显示数据很明显,现在不行是吧?那么我们应该怎么做呢?注意这个时候。我们可以使用这个count count等于ref,注意啊。Ref,如果这么写了,注意看啊,他报错了。为什么呢,说找不到这个ref对吧?哎,那这个时候我们可以在这逗号来一个ref,这就可以了,好,我把它删掉再来看啊。
05:06
我写个ref,注意看上边这个位置是不是有个小扳手啊,啪一回车好了,上边自动的就引入进来了啊注意啊是那小扳手,那我现在也给他一个值是零是吧?给了一个零之后呢,现在我们来看count报错了。说什么呢?说这个count应该是一个ref的类型,里边传的是一个数字。是吧?这是什么意思呢?我们来看看吧,什么叫ref呢?Cancel一下这个count。哎,现在呢,我们把它保存一下。看一下页面啊,这说这是为什么呀。一打开之后我们来看吧,完了,这是什么I。PL是吧,这是一个对象,对象怎么可能会加加呢?是不能的数字才能加加是不是,哎,所以说他报错了啊,那现在原因找到了,这个位置报错的原因是什么,它报错的这个原因说明什么呢?说明count是一个什么对象呢?是一个ref的对象,那对象是不能进行什么呢?加加的操作的。
06:12
对吧,所以不错,这正常是吧,我们理解了,好,然后下一个。我们再来看看这个ref啊,说它的作用是定义一个想数,定义一个数据的响应式这句话吧,如果这么读就觉得别扭啊。我在这儿呢,给大家写个注释啊。Ref是一个函数,然后作用是什么?定义一个响应式的数据,哎,也就说如果说我通过if的方式定义这个数据,这个数据是响应式了,换句话来讲,这个数据如果变化了,好界面也会跟着渲染,是吧?那现在我如何让这个对象里边的这个零,或者说这个数据发生变化呢?我们再来看啊。这里边儿有一个什么Y流,看到了吗?Y流的属性就是这样。那就是说我可以通过这个count对象第2Y流属性拿到里边数据,我可以加加。
07:04
是吧,那现在真的是这个样子吗?我就保存一下。刷新。这个时候呢,我去点一下,诶大家看界面呢,发生变化了是吧,而且方法也执行没有问题。那又有疑问了。说这个东西是吧,返回来的是一个,它返回的是一个什么呢?我们来看啊,笔记里边有这个介绍,它返回来的是一个reference这么一个对象,简称if对象。它返回的是一个ref对象是吧,对象中。有一个什么呢?Y流属性。如果需要对数据进行。操作,那么那就需要使用该该什么呢?Ref ref对象,然后调用Y6属性的这个方式进行数据的操作是吧?哎,所以说这块是Y6,但是就有问题了。
08:04
什么问题呢?我这个位置应该点value吧,这样是不是才能够把这个数据展现出来吧,所以说我去保存啊,我们来看看界面。诶。诶诶诶诶诶。没有效果了是吧,好,那这块如果不用Y6我再去保存。大家看一下效果。刷新。发没发现这个效果是正常的啊,所以说又总结出来一个问题啊,什么问题呢?比如说此时在这个里边啊,继续总结说HTML的模板中是不需要使用这是什么的,点Y6属性的写法的啊,这个要注意啊,上边是不需要点Y流的啊,我在这个位置是要操作它的数据,那得通过它点Y流的方式。并且呢,暴露出去,那我上面是不需要的啊。那现在我们来看一下这个笔记吧,啊首先setup是什么呢?是组合API当中的某一个函数,然后呢,只在初始化的时候执行一次啊,这一点呢,咱们可以通过这来看一下,我直接就Ko.log括号啊啊第一次是吧,我一保存。
09:13
瞬间这边就会有效果啊刷新我们来看一下第一次是不是有了,哎,确实是有的啊,这没问题。再继续看啊。呃,函数如果返回对象,对象中的属性或方法模板当中可以直接使用,这个大家也看到了,没有问题啊。ref的作用是定义一个什么响应式的数据。哎,它返回来的是一个ref对象,如果要操作数据得通过这个ref对象点VALUE6的方式,模板当中是不需要通过什么呢点value的方式的啊。一般用来定一个基本数据类型的这个响应式数据,我把这句话啊拿过来。放在哪呢?放在这儿。他说这个ref的这个东西一般情况下是用来定义一个基本类型的显示数据的。
10:02
那也就是说,将来我这个位置要是想要把一个对象变成显示的数据。好像言外之意就是不用ref呗,是不是,那应该用谁呢?诶。这个时候其实应该用。那这是怎么回事呢?咱们下次再分析啊,我先把这些呢保存一下,并且在这边新建一个目录,这个是零三杠。啊,Setup和ref的基本使用,然后呢,再把当前这个文件也是复制到这个里边来啊,当然这里边儿这些代码呢,我们就都不要了啊,这些东西都删掉。包括这里边儿的这些东西我也都去掉了啊,好了,这样呢,这个文件就会变得很干净了啊。那后边的问题呢,咱们再接着往后去讲,我先把它停一下啊。
我来说两句