00:00
大家好,我是学习园地的特约讲师高国峰,下节课我们学习了计算属性的API computer,那计算属性呢,它的作用就是当我们在模板中使用的变量需要一系列转换之后去显示的时候,我们就使用计算属性,那和我们以前学的计算属性的功能是一样的,那当然了,计算属性除了得到值钙的一个方法,那我们也可以在这个对象里边使用get获取值就是获取变化,如果直接获取变化呢,我们直接在这里边写就可以了,那直接返回这个就可以了,如果我们想设置值的话,那我们还可以写S方法,你传递一个参数,然后我们去设置值也是可以的啊,但设置值的呃应用很少使用,你可以自己去试一试,这一块就不多说了,那。这节课呢,我们来学习另外一个API,就是嗯,监听器watch,那watch呢和我们以前学的那个watch,也就是我记我记得以前讲讲过了,嗯,那就在这里边先学一遍吧,监听某个数据的变化,从而触发特定的操作,是这个作用,那和我们呃comp如果不用这个呃组API的话,那我们跟计算属性是一样,和date写的是同一级的,然后去监听就可以了啊,那用法也是很简单的,那我们来看一下在组合API里边怎么使用这个word函数,用来监听某个数据的变化,从而触触发特定的一个操作。
01:14
我们还是建我们的,呃,项目这里面我们。嗯,还是做一个页面吧。做一个页面,叫做watch w。Watch watch DEMO watch的一个演示,然后我们这里边写上一啊。真听气真听气,Wa watch这个A。的一个使用的一个情况,那我们做好这个了,那我们首先得在,因为想在一个独立的页面里面,所以呢,我们肯定得是弄一个路由对吧。复制一下,然后加个逗号粘贴一下,然后路径呢,我们就叫做呃,Watch wa,然后它加载的这个呃名字,名字当时写不写我们我们都无所谓啊,然后我们这里边。
02:00
加一个我。嗯,W,这个watch DEMO,然后我们再在我们的菜单里边,APP里边,我们加上一个菜单叫watch。Watch watch这里边我们写上啊。静静。然后把这个也复制过来一条竖线。好,就是这个,我们一点这个到这里边来,那什么是监听器我们找到,我们在这里边,所有代码都写在这里边,对不对?首先呢,我们先写个set up入口文件我们先定好,然后在这里边我们定义两个变量light a等于我们用ref吧,Ref这里边我们声明一个呃,E这样的一个值,然后呢,Let b,我们生一个if,生明一个二这样的一个值,然后我们return返回去,把这个AB和B我们给返回去,这样的话我们在页面里边就可以选A和B了,当然报错是因为我们什么呢?用API一定我们的引入I'port引入。
03:02
那么ref,然后。啊,From从哪个里边呢?从小写的vuee里边引入,好这个就没有错了,刷新一下。然后连到PT,当然我们还没显示数据呢,对不对,那我们在这里边就解释一下数据。嗯,我做两个按钮吧,UT做一个按钮,这里边是嗯,A的变化,A等于我们这里边A。然后粘贴一下,这里边B等于。B这样值两个按钮,A等于几,B等于几,然后我们点击的时候它变化嗯,X符嗯CSK等于A。加加吧,嗯,将这个值加加,然后呢,我们FC等于要我们B加加,这样的话我们要呃,Cik啊ICK,这样我们点击的时候让这两个数值变化,你看。AB,对不对?那怎么监听呢?监听只要是我们这里边数据变化我们就可以做,那可以一个一个监听,也可以两个都监听,对吧?那我们先来看使用watch wa wa ch watch,如果我们用这个API了,那我们一定得在这里边引用一下wa ch watch引入才可以,那这里边监听,你看如果我不写具体监听哪个数据,不写具体监哪个数据,我直接放一个回调,放一回调你看这里边写上log OG。
04:26
我们打印一下,随便打印一行杠信你看一下,只要是数据有变化对吧,我们看行不行,这里边呢,你看它有警告,咱先不管,咱们先试一下啊,可不可以警报,没关系,你看我住里边刷新一下。然后这里边它默认就是不是就打印了一行这个钢线对吧,钢钢线,但是我数据有变化的时候,你看它没有动对吧,那我这里边把A拿过来,A加上两号数出现,你看A现在是一个呃对象对不对,a.V6V v rue。把这个值拿过来。然后我们。
05:01
一下你看现在如果里边有数据的化,它默认去监听一下这个对不对,你写哪个数据,它就会监听哪个数据的变化,监听哪个数据的变化,对吧?那现在你看我这块,我现在把A写到这来了,那我写B的时候,你看它变化吗?没变化,因为B数据没写在这块,所以这里边如果我想要这个B数据的话,再加一个B数据,这样的话,你看当我。A数据有变化的时候,你看它这个,把A的数据值放在这块,当b.V的。你看这样,我们去翻新一下。重刷一下默认一和二,是不是把我们这个初值都给我们拿过来了,一和二默认初值打印了,然后呢,我们看一一变化的时候,二没变化,那今天这个对不对,那打印二的时候你看。带变化,也就是这里边儿,如果你写哪个变量,它就会自动监听哪个变量的变化,如果不写哪个变量的话,这个变量变化监听就不处罚,在这里边写哪个它就触发哪个,所以它这个作用和现在你看我把它。注释掉,我把它注释掉,和目前和这个作用的值是一样的,Watch w这个。
06:07
作用是一模一样的。当然这种我们只支持这种写法啊,这种单独的这种写法那。你看这里边,它也会自动监听这里边儿有变化的数据,如果你什么都不写,那比如说我们rog这里边写上一行井号,如果什么都不写的话。标题三号那。我们当然了,用这个我们一定得干嘛呀,我们得把它引入才可以用上得引入。然后。我们刷新一下。你看默认有一个初始化的动作,默认有一个初始化动作,是不是就监听了,这两还没开始监听的,对默认它必须先执行一下,跟我们这个一样,默认是不是先打印一下,对吧?现在你看我们这里有变化,我把A数据变化它没有监听到,B没有监听到,对吧?因为它不是自动监听所有的只有这里边写上数据,比如说a.V6。对吧,我们连上这个,这时候你看自动执行了一下对不对,然后你点B的时候他没监听到对吧?因为这里边根本没执行,但是点A的时候数据有变化,你看它就会执行,当然如果两个数据都监听的话,那我们这块得怎么办?同样连接一个嗯,b.V6就可以了,那这里边有数据的时候会变化,这边数据有变化,你看两个写法是一样的,对吧?所以呢,只学一个就可以了,但是它的功能仅限于如此,就是默认监听这里边使用的数据,对吧?那我们再来回到watch这块,我重新给大家写吧,那。
07:30
这是这种想法,那假如说我就想监听某一个数据的变化,不想监听其他数据的变化怎么办?那我们这块WAT ch watch这块。那我们在第一个错了,在这里边加一个,那在第一个参数这块,我写的A,那么它就是监听A的一个这样的变化,也就是我们这里边儿,你看不写的情况下,如果写的话就监听A的一个变化,然后第二个参数里边。第二个参数里边我们就可以干嘛呀,我们就可以加一个回调指定监听A的数据变化,你看啊,这里边儿我们LG打印一下,比如说我们再打印一行高线。
08:10
保存一下。这边相心一点,你看默认没有执行,你如果具体监听某一个还没有说实话,你看没有把默认打印这一行告线没有打印,但是当我A有变化。你看当你A有变化,这个数字是不是就在变,虽然这里边我没使用A,只要A有变化,这里边就会执行今天A,那你看我B变化的时候,它会有效果吗?那没有效果对吧?所以呢,如果监听某一个值的话,在这块加上这个值就可以了。加上这个值就行监听A对吧,显示式的变化,然后这里边就可以监听,那具体监听怎么处理就在这里写就行了,而我们不加指定监听某个变量的时候,那这种方法是一样,那你必须在这里边用到哪个变量,它才去监听哪个变量,有这样的一个区别,那么它能不能自动也初始化一次呢?你比如说先在刷新一下,它没有自动自始化,那这样的话,如果想到自动自始化一下,你可以加第三个参数,第三个参数叫做I啊,这个让它的属性等于这当然我们用的是一个杰森的格式,对不对?那这边还有其他参数,其他格式用的不多,那我们接着刷新一下,你看我一刷新默认是不是就打印了一次。
09:14
我刷新一下,一刷新默认就打一次,是不是相当于给我们初始化了一次,也就是我们的这个属性值为真或者假,确认是否以当前的初值执行回调函数,对吧?现在我想初始化以当前的初值执行一下这个值,对吧?当然我们这里边你可以去打印一下。你比如说a.V6。加上这个你可以这么去做一下。然后我们在这里边你看。你要默认把它数值打印出来了,当然也可以监听其他的数据,这是没问题的,那监听数据的时候呢,它还可以确定这个数据的新值和旧值,比如说这里边可以选两个参数,第一个是新的A和旧的A减轻旧的AOLL,嗯,L嗯,旧的。
10:00
A你看A的变化,新值和旧值,我这里边就直接乘一个e wa新值,然后呢,我们后边加上这个OD,这样的话就可以给我们。嗯。监听这个A值的前后变化,比如说我们现在刷新一下默认对吧,这里边新值,新值就是这里边初始化的值,因为这里边初始化了嘛,对不对,初始化的值新值就是一对不对,然后按底盘没定义,就是因为这个还没有以前的值,还没有旧值,也就没有上一个值,那我现在用这个A变化。你看。心值是不是变成二了,以前的值变成一了,那我在一定的变化,心值变成三了,以前值变成二了,对吧,那这B的值呢,点B的时候跟它取对效果也有幂监控B对吧。当然我们这里边也可以监听多个值,只要我们这块放上一个什么,放上一个数组A和B,这样的话,我们就可以监听多个值了,监听多个值对吧?那你也可以监听多个值的前后值的变化,那这里边呢,都给它变成数组A,然后a ew心值。
11:01
然后这块。心值A、心值。Holdb。那就会把新知和旧知放给这个,你看这是新知A新知B,那我这块中间,嗯,再加上一个。AB,看怎么再再来一个吧。这里边我们用井号代替井号,然后新的B的值变化,然后新的A的值变化,把新旧的是一直变化,你看我们刷新一下。你看默认一和二是这两个现在的值,因为它没有上一个值,对吧,那我们这个变化的时候是有的,对吧?当然都在这里打印啊,都在这打印,你看二的值没变,一直是这个,那我们打印B的值,你看B的值变化心值现在是现在是五,上一个值是四,上一值是这个前面的值,所以呢,处理多个值也是可以的,也是可以的。当然你不需要初始化的话,你就不需要,呃,最后的一个参数就是这个。那我们能不能?
12:00
呃,能不能处理ref里的属性,这是if里的,我们能不能处理,嗯,因为这个里边是单个变量,什么孤尔型啊,整数型的对不对,咱们可以用,呃relative relative里边呢,可以是一个对象,那对象的值我们可不可以去处理呢?那我们这些都注释掉,都注释掉,我是我是不是有必要再写一个方法对不对?这退回去。这样,呃,我把整个这个方法。我把它注释掉,但这里面已经有多行注释了,你看一下。这样可不可以?那这样的话,把里边它这个都注意掉了,这样的话整个set set up的方法注意掉了,那我们再写一个,因为是两种方式嘛,一个if的,一个是YQ的,那我们set。啊。在那在这里再写一个,那这个时候呢,我们声明我们想用re啊relative,那是不是我这块得给它加上这个对不对,当然了,Watch和这个你都可以。用啊,咱们没用,如果用的话,你你引入,但是你没使用也是错误,对不对,那现在呢,咱们没用那个,所以呢,直接放在这没关系,然后在那这里边我们换一个变量,比如声明一个用户light,呃,Co。
13:13
证明一个用户user等于呃,通过re,通过它来声明。通过它来声明,然后在用户里边有一个A的一个变量,比如说是一,然后呢,我们再有一个B的变量是二。当然这里边是用逗号开了,里边有两个A和B,你看,然后我们返回I return,返回我们把它解构点点点to啊。那个不res这里边把user放出了,结构出去,结构出去,那我们上边放的那不是分号啊,因为结构这里边是阶层的格式,看这里边呃,哪错了。嗯,没有定义这个,因为我们没有引入啊,里面调这个格式拿过来啊,这里边加上to re FS,所有的API用的时候咱们一定干嘛,一定得引入,一定得引入对吧?那这里边拿过来了,那我这里边也解构了,上面是不是就可以直接用A和B了,你看这里边A和B也是想要的,对不对,那我们现在监听这个数据,其他数据没变化,还是这个A和B对吧。
14:20
那今天这个,那我们一样可以用什么可以用。啊,Watch ch watch可以用这个,这个咱们上面不也写了吗?对不对,也可以用一下它加上这个,那同样我们这里边打印一行钢线,你看一下,诶,我们没有。直接。两行钢线点rog。更新一下。你看默认是不是也是打印的这个,那如果数据里边有变化,你看我们在这里边儿数据变化,这里边能不能自动监监控到你比如说这里边user里边的A。User里边的A加上。你看变化了对不对,也就是我们这里边增加的时候是不是可以监控到,那同样点B的时候肯定没效果,因为这里边没用到这个数据B,对吧,所以呢,这个是可以用的,也就是relative里边的这是可以用的,那我们用一下watch watch用一下这个方法,那这里边呢,我们如果直接监控user。
15:16
直接监控独子。在这里边我们打印一下rog,打印一下rog,打印一下井号。在这里边,然后把这三去掉。刷新一下。你看这里边。监控这个user,直接监控这个user,然后我现在点击。哎,U,如果有变化,现在不管点哪个变化,是不是它都变化对吧,因为什么?因为监控的是这个对象,对象里边任何一个成员变化是不是它能监控到。那我们还可以怎么做。这是监控。这个优。就是这个里边和我们那是一样,它是监控整个对象的任何里边重新来刷新一下,你看任何一个变化。
16:00
任何一个变化。你看这里边都会调用对吧,当然我这里边你可以打一下这个变化的数据,User里边的A加上。User里边的B。来刷新一下。啊。当然如果想要他有充值的话,我们也可以加什么,我们也可以加第三个参数,对不对,第三个参数还这个。我们刷新一下。默认是不是打印,这里边一和二默认就打印它的初值,我这会打印它的初值对吧,那同样这里边如果直接这么监控的话,那我们看一下有没有新值和旧值,有没有新职和旧值,这里边因为我直接监控的是user对吧?User里边有两个变化呢,这里边能知道它的新值和旧值吗?比如说嗯。新new,嗯,新X吧,因为现在不知道是A值还是B值,对不对,New旧值OLD,嗯,X不知道新车的就值,那我们在这里边我再复制一份。这里边我们用上钢线。
17:00
然后这里边是心值,NEX这里边什么啊,OLDX就值。答一下你看对象没有定义,我现在点击点击点击点击点击点击对吧,根本看不到这里边哪个值行,哪个值就对不对,因为你不知道存的是哪个,这里边有多个变化的值对不对,那这块只有什么,只有这个对象,只存这个对象整体对象,那你看整体对象里边的心值,如果我A变化我这么写这里边。这个对象里边是嗯,A变化,嗯,就值里边的A吧,那假如是叫A变化,那团队因为不知道A和B。你看这里边能不能给我们打印这个A和B,你看这里边根本不让我们打印,因为这新知旧址里边不知道是A和B对不对,所以不这么做对吧。这是。这种情况他打印的对象是监控到他变化了,但是呢,不知道这里边儿,咱们找不到这里边哪个值的变化。是可以监控的,任何一个电话都可以监控得到,对不对,然后也能找到新车旧值,但不知道对应的是哪一个,那我们把这个。
18:05
复制一份。我们再分一下,你看,那如果我们这样去做呢,你看。这块用一个。嗯。构造方法,我们返回一下,返回一下什么呢?这用一个箭头函数,在函数里边放一个函数,函数里边返回值user里边的A,那我就监控这个user里的A。这样的话。我们看一下。这个我们先呃放这吧,你看啊。相信一下。你看这里边一对吧,也初始化了,然后这个没有定义,然后呢。这个这个就是我们监控里边的某一个值点击啊。这个新值和旧值就是我们什么这个A的新旧变化,你可以具体监控这里边某一个值,那现在我点B的时候,你看就没有效果,因为B虽然变化了,你看这里边值变化,但是呢,我这里没监控,那如果你想两个都监控,跟我们原来那个写法是一样的,怎么写法呢?你看中括号。
19:06
对吧,里边加两个回调方法对吧,括号。这个函数user里边的B。对吧,那这里边同样心值变化,前面有两个值,那也是一样的。啊,New新的A。新的A和。嗯,新的。B吧,这里边儿这么做,然后我们后边同样旧的。A和根号,别忘了这是个数啊,OLD,旧的B。新旧两个值,那这块就不能这么写了,新值A和新值呃,旧值A,然后我们复制一份。这里面。User里边的A和B,然后我们这里边是新值B和旧值B。当然这块围段能看得出来,他们是两个不同的,对吧,心智就是你这样一下。加新一下,这样打的太多,你不知道从哪看了,你看这是初始化,一和二都没有定义,你看现在对吧。
20:04
新制旧治都可以了。静止,静止。两个都是可以打印的,对吧。如果你直接传一个对象都监控的话,是不知道的,如果是里边成员是可以的,所以呢,我们现在就用watch和下边这个用法,加上这个初始化这种方式,那我们都都给大家讲了这两个,其实它完全可以替代什么,替代这个对吧?所以这个呢,你就不用去记了,Watch这个efd这这个API记了,直接记这一个word就行了,它可以监控一个,也可以监控两个,可以监控ref定义的数据,显然是数据也可以定义,呃,Relative定义的数据就可以了,这就监听。监听什么时候用呢?就是。某些数据变有变化,从而触发特征操作,对吧?当我们在项目里遇到,你看讲这个数据变化的时候,我们想做一些什么事情,那就可以在监听器里写,他跟计算属性还是有一定的区别的,计算属性是有一系列变化之后,我们想在页面里边显示,对吧?这边还有新值旧值,它俩是有区别的。
21:02
好,谢谢大家。这节课我们就。
我来说两句