00:00
好嘞,各位,那在这一小节呢,我们给大家说一下V3里的这个watch,哎,就是数据监视,和VIEW2里的watch啊,功能是一致的,哎,就是对变化的一些数据呢,做出一个监视,好回到代码里,那为了能把watch监视的多种情况啊都演示出来,那接下来呢,我得换一个案例了,哎,就不能用这个人的信息这个了,这个不足以说明问题啊,展示的情况比较少,来给它删掉,先写一个最基本的,我们之前做过这个,就是当前求和为那个,哎,当前求和为,然后呢,我读取一个sum的值,Sum啊,那在这呢,里边的东西我就得删减一下了啊,需要的数据呢,不再是person,而是一个基本的数据类型,Sum,既然是基本的数据类型,同学我就不用reactive了,我是不是可以用这个ref,哎,那我在这呢就很简单了,Ref直接写给他一个零吧啊计算属性不需要,哎,这方法呢也不需要,接下来就做一件事儿,把这sum交出去,这会儿是不是就可以用了,哎在下边呢,我再写一个按钮啊,Button叫做点我加一啊,那给他一个点击时间。
01:00
我就不再写回调了啊,因为逻辑很简单,不就是sum加加嘛,对吧?各位诶,这computed也不用给它删掉,OK,回头看一下效果啊各位来到这儿刷新一波,当前求和为零啊,那点一下走走走是不是变呢?诶好了,接下来呢,写一个watch,我们先说说VIEW2里的watch怎么写回来,V2里的watch大家还记得吧,直接写一个watch,它是一个配置项,并且它的值呢,是一个对象类型是不?哎,那这就涉及到watch监视的两种写法,一个是简单写,一个是完整写,对吧?咱先写一个简单写的,简单写就直接说你要监视的谁,Sum直接写成函数,对不?只要有一天这个sum变了,那我就输出sum的值变化了,然后大家还记得吧,这会能收到两个值,一个我们叫做new value,就是新的值,哎,还有一个呢,就是old的value旧的值,那我就把这两个呢,给它复制往这一放走是不是就可以了,来咱看一下效果啊来回到这儿刷新走对吧?哎,前边的是当前的值,就是最新的值,那这个呢。
02:00
是之前的值是不?哎,可以配置,也就是说啊,VIEW3里面能不能用VIEW2之前写的那个VO是可以的,但是我这么写各位只是一个简单的写法,那完整版的写法大家还记得不?哎,我把这个呢,注掉,完整写是把这个sum呀,写成一个对象,对象里面有很多的配置啊,其中最重要的一个就是监视的回调,我们用handler对吧?那它同样能接到这个new value old的value,然后把这个呢,也给它做一个输出缩进,调一下保存,回头看一下效果,走走走是不是也可以?哎,那这么写的优势在哪呢?它可以配置一些属性啊,你比如说同学immediate,我来一个true,什么意思呢?就是立即监听一下是不?哎,来回到这儿就我还没有变呢,一上来handleler是不是先执行一下啊,这里面还有个配置,不知道各位记不记得了,叫做deep,然后呢为true,什么意思,叫深度监视,诶,DEP是吧?哎,叫做深度监视,如果说你的数据层级是很多层的,那你可以写一下这个deep,因为默认它开启的只是一个浅层次的监视,对不好了各位,这些东西全都删掉。
03:00
不留,因为是VIEW2里面写过的,说说VIEW3里面怎么写这个监视,VIEW3里的watch呢?变成了一个组合式的API,那就意味着你需要在这咋的引入一下这个watch,用法也极其简单,各位来,我写一个叫做监视,写上watch,然后它是一个函数,各位,哎,就是我们学的这些组合API,同学啊,你捋顺一下,Comp也好,Ref也好,Reactive也好,这些东西是不都是一函数?哎,组合API就是一堆内置的函数来写一个watch。首先说明各位你想监视谁?哎,我想监视它,那如果它变了怎么办?那我就帮你调这个回调是不在这儿啊,你就放心的写箭头函数吧,为啥说呢?因为我们知道setup里的list是under find是不?所以说你就写箭头函数啊,写普通函数当然也没问题是不?各位来走着,那它同样会收到一个叫做new value,还有一个是old的value对吧,那在这呢,来一个consolo输出什么呢?跟之前一样啊,叫做sum的值变化了,或者这么说吧,Sum。
04:00
方便了,哎,然后呢,输出这个new y6和这个O的Y6复制一下放在这儿,OK哎就写完了,注意不用接到什么东西,各位不用在这来一个什么cost X不用接,因为它不属于数据,同学你体会数据你得接,这是一种行为,你规定好这种行为,然后当它变的时候,他就确实能帮你调这个函数就得了,是不是各位保存回到这刷新一波,看一下效果啊走走走,跟刚才的效果是不是一模一样,哎各位可能就觉得,哎呀老师这个五三里的watch持挺简单的呀,其实这里面呢有点坑,哎咱慢慢来回来各位,我刚才给你说的这个呀,其实只是情况几呢?情况一哎监视什么呢?说的明白一点啊,监视ref所定义的响应式数据,你体会体会,我监视的sum是不是ref定义的,是啊,OK,好,情况一呢,说完了把这主调,然后呢,我再说说情况二,哎,走。
05:00
情况二,这回也是监视,但这回监视什么呢?监视多个啊,那我这写的再明白一点,监视ref所定义的一个响应式数据,那这回就是多个,什么意思呢?就比如说我还有一个,哎,不是sum了,是message了,嗯,那这里边呢,写一个你好你好啊嗯,然后呢,我把这东西是得交出去,不交出去怎么用啊,然后在这呢,同学我在这儿给你做一个分割线啊,就是上边的这一块都是跟求和相关的,下边呢又是一个小功能了啊来,在这儿小我回车,首先还是这个H2,然后叫做当前的信息为,然后呢,读取出来MSG,然后在下边呢写一个按钮啊,叫做修改信息啊,那怎么修改呢?还得绑定点击事件里边怎么写啊同学,不用写那么麻烦是吧?哎,你好啊,改成什么张三你好,不用那么麻烦各位就直接把这MSG啊加等加等个什么呢?加等个感叹号就得了。
06:00
就我点一下你多了一个你好啊,感叹号你再点又多是不来看一下效果啊各位刷新一波,这不你好啊吗?点一下多一个,再点再点再点是不?哎,这不就是变化吗?好,那回来各位接下来呢,我想说的是,我要监视萨的同时还想监视他,这得咋写呢?哎,其实有一个最笨的办法,各位就是把这个呀复制,哎,然后呢,再给他来一套换名呗,MSG哎,那这呢,MSG是不是得了各位,哎,你看这就是区别各位VIEW2的配置当中,你能写出两个watch吗?不能,你说为啥?因为VIEW2那个年代,各位这个watch吧,它是一个配置项,你说得是什么样的一个东西能写两个配置项,完了这两个配置项还同名呢,是吧?所以说VIEW2里的时候,同学你只能写一个watch配置项,但是在VIEW3里面,你可以调用N次watch置函数来体会体会是吧?各位老师这不写完了吗?嗯,来情况二啊,来看效果了,刷新我让这个和变。
07:00
哎啊哎,是不是可以能监视到,那我让这个你好阿变是不是也能监视到啊,你看新的值是带感叹号的,原来是不带的,哎,朱老师这不就完了吗?那你这么写不麻烦吗?各位,哎,所以说有一个简便的写法,怎么写呢?就是哎写一个不好吃,然后在这瞧着我写一数组同学这也好理解,你说对吧,我既视一个直接写我既然是多个,那丢数组里吗?是不?各位让让咱设计,咱是不是也得这么设计?哎,Sum长逗号了,MSG,但现在有意思的事出现了啊各位,这当然也得改一下啊,Sum姆或谁MSG变了,就这玩意儿,这玩意儿猜猜让你设计你怎么设计?你现在监视的哥们儿可不是一个了,是多个,那你说这个new value和这old value你怎么去维护呢?老师就这么维护呗,呃,之前的比如说是零,现在的是一,哎,那咋的message不管了是不?也就是说各位你监视的如果是多个,那么这个new value和old的value里面就必须得体现出来多个,那你监视的如果是一个呢?那什么也不说,他俩就是一个东西呗,是不看一下效果吧,各位啊,它是这么设计的,来刷新一波,现在呢?呃,初始化的这个和是零,完了不带感叹号是不是?各位一点一点,来啊来,我先点击这个点我加一,我让这个和啊发生变化,走你。
08:13
啊,把这儿呢再抻一下,让大家看的全一点,各位首先确实捕获到了改变,随后呢,这什么这是new y6,这什么这是old的Y6,同学你发现它就是把你监视的多个数据丢在一个数组里了,哎,也就是说这个new value不再是一个单纯的值了,它是一个数组,哎,数组里面第一个就是你监视的时候写在第一位的这个sum OK,那同样这个message写在第二位,那就在这儿呗,若老师这你好啊,为什么没变呀,没变就对了呀,因为我没点这按钮啊,对不?各位这你好啊,没发生变化,我点的是这儿,对不对,只不过我把它们两个一起监视了,对不对?各位,哎,那你说接下来我要点那个修改信息呢,走,那同样的道理嘛,这个一是不变的,然后最新的你好啊,带感叹号之前的不带是吧,各位,OK,哎,OK,这就是监视多个,嗯,那把这个呢注掉,然后说完这情况二啊,同学,我们一起重温另外一个东西,就是刚才我在写5U2配置的时候,我里边是不是写了一个immediate,又写了一个deep。
09:13
是不是这两个配置啊,那你说这个配置得写在哪儿呢?就是无论情况一还是情况二,咱现在就说我想配置一下immediate,我咋配置,我把情况二注掉,咱拿情况一说问题,各位,现在就是我得去点这个东西。哎,多点几下,这个sum得发生变化,然后呢,它这个回调才能执行,但是有的时候我的要求是一上来就想这个执行一下,那你说怎么办?是不是得写那个immediate to啊,问题是写在哪?哎,直接跟大家说,这个watch能传递第三个参数,你可看好了啊,Watch的第一个参数是监视的是谁,第二个参数是监视的回调,那么第三个参数就是监视的配置,哎,写上immediate,我给他来一个车,对吧?各位回到这边刷新一波,你看没点呢,一上来就是这样的吧?哎,之前咱也聊过啊,你加上immediate,那一上来的old value当然是安安范的,他没变呢,他上哪找那个old value去是吧?各位,哎,那你说同理,谁也得往这儿配置deep,哎,是不是这个深度监视也得往这儿配置啊,当然各位,我在这儿配置deep true一点意义都没有,为啥呢?我监视的萨它揍是个数字,上哪儿deep去啊是吧各位,那这呢也跟大家透露一个小秘密啊,就是这个deep true在VIEW3里面有点小问题啊。现在我。
10:29
我先不写行吧各位,就是该写的时候咱写,现在写了没意义,在这晃你干嘛呀,删掉,但是这个能写是吧?各位,哎,好了,把这个注掉,那这块能写,你说这能不能写呢?哎呀,同学,只要你掉watch了第三个参数就可以这么玩,我不管你监视的是什么东西是吧?来到这边刷新你看吧各位,New y6就是当前的零,你好啊,之前呢,没东西,那就是一个空数组,注意啊,这块可不是数组,里面有两个安de find,哎,是个空数组。好了,回来各位,那我把这个注掉行吧,那这一小节呢,我们停。
我来说两句