00:00
这一节咱们说说这个计算属性与监视的问题啊,那这个问题呢,咱们会放在一个例子里边去讲,所以说呢,一会儿我会先采取什么方式呢,搭建界面,搭建完界面之后呢,咱们再去讲讲这个计算属性和监视是怎么用的啊好。那我就打开这边啊,然后在这个里边。还得是这个样子啊,新建一个目录,把之前的代码保存一下,零七杠。嗯,这个是什么呢?Ref和re。的这个细节问题。诶好嘞,然后我们把它这个APP文件呢,放到这里边来。搞定这个折叠起来啊。这些我都都不要了啊好,那这里边儿呢,这些东西我也先不要啊。我先搭建一个界面,然后咱们在这个界面里边呢,去说一说计算属性和监视啊。好,那我先来个HR吧,这个是计算属性和什么呢,和监视啊。
01:00
啊,里边我就先来一个什么呢,呃,Field set吧。嗯,这个里边我给它里边再来一个legend,这个叫做什么呢?啊,姓名操作啊。啊,我把这个再复制一份,因为这个也得笑。那这个是。改个名啊,叫计计算属性和监视的演示好。啊,先保存一下啊,咱们先看一下这个界面可能会好一些,嗯,大家看啊,有一个姓名操作,还有一个计算属性和监视的演示,那么里边呢,可以让用户输入姓名啊,可以输入姓氏和名字,那我这块先来一个姓氏,嗯。嗯。姓氏好这个啊。然后呢,再来一个input标签,Input。Input。嗯,Type等于text,就快速搭建一下啊,Hold,请输入姓氏。
02:00
请输入姓氏,然后来一个斜线。好搞定啊。然后把它复制一份,这样呢,这个叫做名字嘛。这个是请输入名字啊好保存,咱们先看一下界面。诶,好了是吧,我再让他换一个行。来一对B呗。啊,快速的去搭建一下啊。咱们搭建这个界面不是问题,问题是要讲里边的东西。嗯,好了,这里边有个姓氏,有个名字,那我下边再来三个啊。嗯,那就把它们复制一下。放到这来。再CTRL下这个是姓名啊,它也是姓名诶。啊,这也是姓名啊,改一下啊,这个是显示姓名啊,我把这都改一下。快速去改一下啊。好保存啊,看效果。好了,这个界面呢,我就搭建完了,然后咱们通过这个让用户输入姓和名字的方式呢,然后在下边显示它对应的姓名,不过呢,我们是用计算属性和监视的方式去实现的啊,所以说呢,咱们来看看怎么做啊。
03:10
好,那在当前咱们这个组件当中啊,我需要引入ref,嗯,算了,我用的时候再去引入吧,那我们先来一个setup吧。这样大家都知道什么时候用谁啊,Return来一个对象。那我最终。应该显示用户的姓氏和名字是不是,所以说我这边啊,要有一个用户来存储他的姓氏和名字,所以说我先定一个对象啊,这样定义一个响应式的对象啊,Count来一个user吧,等于那我用呗。Re,嗯,回车上面就自动引入了啊。里边的一个对象,首先它应该有一个姓氏,嗯,姓氏。好,它应该有一个名字,那我这块就写个first。Name吧,啊,先给他一个默认的啊,叫东方,那这边来一个last name也给他一个默认的叫不败,呃,诶,加个逗号啊,啊不啊对,加上一个逗号啊,那我最终要暴露出去吧,那我暴露出去user不就完事了吗?
04:13
那好,那我右的当然可以在上面用了呀,所以说我这个位置的话,就给它来一个VGA model啊。那就写上一个优点,First first first name,嗯,注意大消息。然后呢,再来一个v model,复制一份,这个位置里边写上一个last name last name啊格式化啊保存一下。我们先来看看效果吧。很明显这块可以显示东方,可以显示不败啊,当我在这边改改改变姓氏改变名字的时候,那下边第一个微框里边啊,第一个微框里边那就会显示它对应的姓名啊。就是姓氏加名字嘛,不就姓名嘛,哎,那该怎么做呢?哎,在这里边我们可以采用这个计算属性的方式。通过计算,通过计算属性的方式啊,实现第一个姓名的显示,但仅仅是显示,我不需要去修改,言外之意就是说我在这儿111,好像222是吧,这个里边就会显示东方111,然后下线的不败二二啊这种效果就行了,我没有必要继续在这儿去改变姓名,然后上边的姓氏和名字改变,因为这个操作的话,我打算放在下边的两个姓名框里边去实现啊。
05:22
好,那怎么做呢?哎,我用计算属性,那我们这个时候需要用到计算属性啊,在VIEW3当中的计算属性怎么玩的,VIEW3中的计算属性,嗯,这么com。Co PU啊。得注意啊,我得先引入啊。Com PU TD。哎呀,没有啊,没有的话,那我没有办法,我只能去去在上边让他去引入一下啊逗号。嗯,Com PU TD啊,这是有的啊。啊,有了它就是一个函数,那在这个函数里边呢,可以传入一个回调函数。注意啊。如果计算属性中啊,计算属性的回调,计算属性的函数中吧。
06:05
呃,应该说计算属性的函数中,如果只只传入一个回调函数啊,表示的是什么呢?呃,表示的是get。好,那我在这啊啊,那我如果要是get的话,那就说明什么呢?我应该拿到它的姓氏和名字,最终返回来一个姓名是吧,放在上面去展示吧,那我这样做啊,嗯,我怎么做呢?这个位置可以直接去接受for name a name1等于它就可以,然后最终我直接return谁呢?用我当前user firstname,再加上下线,再加上user里边的什么last name。好格式化一下啊,保存,现在我们来看一下是不是这个样子的。啊,这个位置没有显示是吧?没关系,我们可以在下边儿把for。嗯,内一给他暴露出去,然后呢,在这个位置我就可以使用什么了呢?V-model等于for,诶内一。
07:05
那咱们来看一下啊,已保存。大家看是不是就显示东方不败了吧,改变数据,改变数据,哎,都变了,那我这儿改的话,这改的话,那上面就没有变是吧,因为我只是做了一个只读的操作嘛,啊,所以说现在大家来看啊,这个计算属性如果只传入一个回调函数,那么返回来的实际上是一个数据,这个数据给了什么?For name me,那么我特别想看看for name me是什么样的数据呢?For。嗯,内幕一,诶看一下啊。刷新一下。哎,那么我看一下诶。看到了吗?Comp的re p啊L,那就说明它也是一个re对象是吧,因为我们这里边可以看到value嘛,很明显是一个ref的对象,那所以说这个位置的话,我们可以稍稍的加上一个注释,实际上返回的是一个什么呢?Ref啊类型的对象,那说明这个计算属性是ref操作是吧,好OK。
08:01
那这个呢,我就不要了啊好,那下一个下一个我希望做什么操作呢?我希望做这样的操作。刷新啊,当我在上面输入东方一不败二这个位置,第二个里边肯定也显示东方一和不败二,但是我希望什么呢?在这个姓名当中,如果说我要是改变。改变了这里边的什么呢?姓名,比如说这儿写上东方幺幺不败二二,那上面这个位置会自动的有什么呢?东方幺幺不败二二了啊,是这个效果啊,所以说这个操作它应该是属于计算属性里边的get和SET2个。东西是吧,好,那怎么做呢啊。那这个时候啊,在这。呃,这块我加上一个注释啊,加上一个注释,这个是第一个第第一个姓名,诶诶。那这呢,我就写上一个第二个行啊,好,同样的话,我们还是使用这个计算属性的方式来去实现啊,那就cost for name2等于computed,像这种情况啊,注意这个函数当中,如果想要诶,Cost啊,想要实现什么呢?想要实现这个get和SET2种方法都存在的情况下,或者说读和写一起操作的情况下,那这个时候我们需要往里边传入一个对象,里边写上一个get方法啊,So easy set方法。
09:17
哎,那赛的方法里边应该设置数据嘛,哎,好,那get的方法呢,跟上面代码几乎是一样的。那没什么可说的啊,那set方法呢,Get方法一样,Set方法呢,好,那set方法的话,我们需要对它进行一个稍稍的处理啊,小小的处理来一个cost,诶这样。咱们可以看啊,Can Di log来一个什么呢?VL。啊,注意啊,我这块写上一个点点啊逗号啊哒哒哒哒哒哒,我们看一下啊,能不能使能不能进入到set方法里边。好,同样的,我再次刷新。那当然了,这个位置我还没有暴露啊,把four name2放在这儿。逗号,然后上边的这个位置再加上一个VGA model,再来一个phone,这个搞定啊。
10:03
并不富的,然后刷新啊。现在我们可以很明显的看到这个第二个文本框里边呢,已经有了这个,呃,姓氏和名字就是姓名了,好,那我在这写输输一个要来这二没有问题,在这来个一,在这来个二。诶,大家看一下这个位置是不是进入到两次吧,哎,进入了两次,那很明显这应该是一个字符串嘛,是吧,这个串里边有姓氏和名字吧,那现在我应该把姓氏和名字拿出来,分别给谁呢?First name和last name,诶那好办了,那我就直接注释掉吧,不要了啊,怎么做?直接来一个com的内姆斯啊,然后来一个Vr.split split里边把下限给他干掉啊。呃,Split下线干掉,嗯,他说什么呢?Spl does not type no啊,那就说明他不知道我当前什么呀,当前这个VL的类型嘛,是不是啊,没关系,我先写着啊,那现在的话就是user.first name就应该等于我的NAME4中号零了,我只要第一个嘛,因为上面这个代码返回来的是数组嘛,user.last name就应该等于我的内幕词什么呢?一。
11:07
诶。因为他不知道我的类型,不知道VL的类型,那我怎么办?我在VR后边写上一个string。字串类型嘛,这不就搞定了吗?好,走起刷新。我们去改上面的啊幺二,然后这幺这二。大家看一下get和set操作就都有了啊,这是VIEW3当中的计算属性,那这个computed,注意啊,Computed computed在使用的时候里边可以传入一个回调,如果传入一个回调的话,它表示的是get操作。如果说呢,要有get操作和S操作,那里边儿应该传入的是一个对象啊,并不复杂好。下边还是我,如果这个姓氏和名字发生了变化,我希望姓名第三个姓名也会跟着变化。当然呢,这个操作呢,我给大家换一个方式,我们不用计算属性,我们用监视啊监视。这个位置我们用监视。
12:00
监视,那这块应该是监视什么呢?监视这个,呃,指定的这个数据啊,怎么做呢?好我们来看一下啊wac。哎呀,没有提示,没有提示的话,还是这样吧。Watc它为什么没有提示啊,因为VIEW2当中就有watch是吧,所以说我在这个在这个位置写watch的时候,它没有那个小扳手的呃,小图标,所以说没办法是直接回车啊,那我们就只能在上面去引入啊,但是都可以正常使用啊,就说V3当中也可以使用V2里边监视,但是我们现在说的是VIEW3当中的监视啊,注意这个监视呢,它也是一个回调,它们都是属于这个里边的API啊啊watch室,Watch室里边可以放什么东西呢?比如说我想监视哪个数据。我建设哪个数据做什么事情,比如说我想建设什么呢?加设这个user的这个数据啊,毕竟这个user对象里边有first name和last name,哎。后边呢,给一个回调就行了。这个回调里边我们写个VL啊注意。VL啊,既然是U的对象,VL就相当于是U的了,里边大家可以看啊,有这个first name,还有这个什么last name啊,我把鼠标放在这,大家可以看一下是吧?是一个对象,那既然如此,那我是不是可以解构啊first name逗号,再来一个last name,这不也可以吗?
13:14
好,我监视这个对象做什么事情呢?我要把这个里边的姓氏和名字拿出来拼接,拼接完之后呢,放到一个变量里边,这个变量里边存储的就是姓名,然后也就是作为第三个姓名来使用啊,那我这个位置应该是第三个姓名了啊,那我就来一个comes for name3吧,它就等于先给一个ref吧,给它一个空串是吧?他这个位置为什么会报错呢?因为找不到内啊,没有引入嘛。If引入搞定。好了,那我这里边儿怎么写呢。是不是,哎,我这里边写个for,因为是ref的方式,所以说是forname3.value,它应该等于我的first name,注意哈,是first name加上下限的,再加上一个last name。
14:03
好,搞定,保存。呃,我去刷新一下,现在很明显出问题了,我的文本框里边并没有显示姓氏和名字,嗯,那我在这输入一个东西,再输一个东西,那我们看啊,这块没有是吧?哎,那很多同学都想到了,没有暴露出去嘛。呃,拿过来,然后我的这个位置再来一个V-model,其实我想给大家去描述一个问题的。就不能要在这儿啊,有点小问题好搞一下。刷新。注意看啊,确实是没有啊,那我在这写一写二,诶这才有,这是怎么回事,这是怎么回事,这是什么情况,为什么第一次没有,第二次就可以了,哎,原因就是什么呢?咱们这个watch啊,这个监视啊,他没有在一开始的时候就执行一次。所以说我希望什么呢?默认就让他去执行一次的话,那么我们应该怎么办呢?以前的时候在VIEW2里边我们说过这个问题啊,在VIEW3当中,我们可以给他第三个对象,这个对象里边有一个immediate啊,不是亚ma还是immediate。
15:03
给他一个处,给他一个处就是什么意思呢?哎,就说明这个当前的watch啊,哎默认呢,会自动的去执行一次啊。然后当然啊,我们去保存一下看效果吧。一开始的时候它就会执行一次,诶大家看这是不是就有效果了吧,写个一写个二,诶没有问题,写个一写个二,没有问有问题啊,那现在我在这个姓名里边去输入这个改变这个姓名啊,我们会发现上面根本就没有效果啊,当然还有一个问题,我这块监视的是一个对象,这个对象里边有没有可能有多个属性呢?有可能。那属性里边还有没有可能有对象呢?也有可能。属性里边有对象,这对象里边有属性,就是属性里边有对象,对象里边还有属性,那将来这个层次感如果很深的话,那我坚持最外边这个对象,我希望里边所有对象都能够,所有的属性都能够被我依次检视到,叫做什么呢?深度监视,那该怎么办呢?可以在这配合上一个什么地方,给他一个什么处。
16:01
啊,在这简单写一下注释啊,就说什么呢,这个immediate。嗯,叫什么呢?哎,默认会执行一次这个watch,然后呢,DEP这个东西是属于什么呢?深度监视啊。哎,好。那这个是watch它的用法,呃,照之前相比的话,其实也变得更加简单了嘛啊。那除了卧室以外,其实这里面还有一个监视。还有一个解释啊,那比如说啊,我在这儿引入这个东西,这个叫做water。嗯,这么一个东西,它呢也是监视。比如说呢,我把它放在这啊括号啊,它也是监视,但这个监视和上面监视有什么不一样的东西呢,这样我们就得通过代码的方式呢,去解释一下啊。那么我在这里边直接写上一个回调啊,它也是可以的啊。那我在这个回调内部做点什么事情呢,比如说啊。
17:00
呃,这个是什么呢?我让他在这儿吧。但是这个位置就得写上user的啊,user.for STEM,再加上这个user点什么呢?那STEM。那我上面这个暂且先不要啊,暂且先不要,我保存一下,咱们看一下啊。好,我打开这个界面,注意啊,我刷新。有没有发现一个问题?有没有发现一个问题?如果咱们用watch watch内部呢?这个位置需要配上一个什么呢?Immediate默认要watch去执行一次,而现在我没有配这个东西,我们会发现watch这个东西。它竟然可以默认执行。换言之啊,在这儿它比上边这个是不是更加聪明了一些啊,哎,所以说在这儿啊,我们也稍微加上一下这种监视当中是不需要配置什么的这个immediate。它本身默认就会干嘛呢,进行监视,进行监视或者说啊,默认执行一次。
18:03
哎,默认会直接离子的啊好。这里边儿是什么呢?是咱们讲了两个watch啊。那么我这块呢,就先说到这儿,一会儿呢,咱们再接着去讲啊,这里边还有一点其他的东西。
我来说两句